PageHelper分页+前台BootStrap_pagination样式/BootStrap_table样式

 

 

一.PagerHelper分页+前台BootStrap_pagination样式:

 

效果：

1.引入pageHelper插件：2种方式    pageHelper所需jar包：pagehelper-5.1.2.jar

BootStrap_table文件与pageHelper.jar 下载：https://pan.baidu.com/s/12qi7aC6MzSb2vAfOgpAdCg   提取码：isgr

BootStrap_pagination下载：https://pan.baidu.com/s/1he6dPSPuLOwjys2CkjxAiw 提取码：objo

<!-- 引入 pageHelper插件 -->
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!--reasonable：分页合理化参数，默认值为false。 当该参数设置为 true 时，pageNum<=0 时会查询第一页， pageNum>pages（超过总数时），会查询最后一页。 
                默认false 时，直接根据参数进行查询。 -->
            <property name="properties" value="mysql" />
            <property name="reasonable" value="true" />
        </plugin>
    </plugins>

  第二种：配置在数据源处：

<!-- 数据源 -->
   <bean name="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
        <property name="driverClassName" value="${jdbc.driver}" />
        <property name="url" value="${jdbc.url}" />
        <property name="username" value="${jdbc.username}" />
        <property name="password" value="${jdbc.password}" />
        <!-- 作为一个数据库连接池  性能参数   -->
        <property name="maxActive" value="10" />
        <property name="maxIdle" value="5" />
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <value>
                            helperDialect=mysql
                        </value>
                    </property>
                </bean>
            </array>
        
        </property>
   </bean>

2.Controller

package com.zhiyou.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.zhiyou.pojo.PageBean;
import com.zhiyou.pojo.User;
import com.zhiyou.services.UserService;

@Controller
public class UserController {
    
    @Autowired
    private UserService userService;
    
    @RequestMapping("user")
    public String pageShow(){
        
        return "userList";
    }
    @RequestMapping("userPage")
    @ResponseBody
    public PageBean<User> pageShow(@RequestParam(defaultValue="1",required=true,value="pageNum") Integer pageNum,Integer pageSize,String name,String factions){
        /*Integer pageSize = 5;*/
        User user = new User();
        if (name != "" && name != null) {
            user.setName(name);
        }
        if (factions != "" && factions != null) {
            user.setFactions(factions);
        }
        PageBean<User> page = userService.pageShow(pageNum,pageSize,user);
        return page;
    }
    
}

3.page实体类

package com.zhiyou.pojo;

import java.io.Serializable;
import java.util.List;

import com.github.pagehelper.Page;

public class PageBean<T> implements Serializable {

    private static final long serialVersionUID = 1L;

    private long total;        //总记录数
    private List<T> list;    //结果集
    private int pageNum;    // 第几页
    private int pageSize;    // 每页记录数
    private int pages;        // 总页数
    private int size;        // 当前页的数量 <= pageSize，该属性来自ArrayList的size属性
    /**
     * 包装Page对象，因为直接返回Page对象，在JSON处理以及其他情况下会被当成List来处理，
     * 而出现一些问题。
     * @param list          page结果
     * @param navigatePages 页码数量
     */
    public PageBean(List<T> list) {
        if (list instanceof Page) {
            Page<T> page = (Page<T>) list;
            this.pageNum = page.getPageNum();
            this.pageSize = page.getPageSize();
            this.total = page.getTotal();
            this.pages = page.getPages();
            this.list = page;
            this.size = page.size();
        }
    }

    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getPages() {
        return pages;
    }

    public void setPages(int pages) {
        this.pages = pages;
    }

    public int getSize() {
        return size;
    }

    public void setSize(int size) {
        this.size = size;
    }
    
}

4.前台 ,需要引入bootstrap-paginator.min.js    

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
    pageContext.setAttribute("URL_PATH", request.getContextPath());
%>
<link href="${URL_PATH}/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${URL_PATH}/js/jquery-1.9.1.min.js"></script>
<script src="${URL_PATH}/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<scriptsrc="${URL_PATH}/bootstrap-3.3.7-dist/js/bootstrap-paginator.min.js"></script>
<script src="${URL_PATH}/js/showUser.js"></script>
</head>
<body>
名称：
    <input type="text" id="name"> 种族：
    <input type="text" id="factions">
    <input type="button" value="查询" onclick="render()">
    <table class="table table-striped ">
        <tbody>
            <tr>
                <th>排序</th>
                <th>姓名</th>
                <th>性别</th>
                <th>来源</th>
                <th>种族</th>
            </tr>
        </tbody>
        <tbody id="userContent">
        </tbody>
    </table>
    <!--显示翻页  -->
    <div class="form-group">
        <div class="col-md-12 text-center">
            <nav aria-label="Page navigation">
            <ul class="pagination">
            </ul>
            </nav>
        </div>
    </div>
</body>
</html>

5.js

//    分页
var getCategorySecondData = function(params,url, callback) {
    $.ajax({
        url : url,
        type : 'post',
        data : params,
        dataType : 'json',
        success : function(response) {
            callback && callback(response);
        }
    });
}
var setPaginator = function(pageCurr, totalPages, callback) {
    var numberOfPages = 5;
    if (totalPages < numberOfPages) {
        numberOfPages = totalPages;
    }
    $('.pagination').bootstrapPaginator({
        /*当前使用的是3版本的bootstrap*/
        bootstrapMajorVersion : 3,
        /*配置的字体大小是小号*/
        size : "normal",
        /*当前页*/
        currentPage : pageCurr,
        /*一共多少页*/
        totalPages : totalPages,
        /*页面上最多显示几个含数字的分页按钮*/
        numberOfPages : numberOfPages,
        /*设置显示的样式，默认是箭头    */
        itemTexts : function(type, page, current) {
            switch (type) {
            case "first":
                return "首页";
            case "prev":
                return "上一页";
            case "next":
                return "下一页";
            case "last":
                return "末页";
            case "page":
                return page;
            }
        },
        onPageClicked : function(event, originalEvent, type, page) {
            currPage = page; // 注意currPage的作用域
            callback && callback();
        }
    });
}

var currPage = 1;
var pageSize = 5;
var render = function() {
    $('#userContent').empty();
    var name = $("#name").val();
    var factions = $("#factions").val();
    var url = '/userPage.action';
    getCategorySecondData({
        pageNum : currPage,
        pageSize : pageSize,
        name : name,
        factions : factions
    }, url, function(data) {
        showData(data.list);
        setPaginator(data.pageNum, Math.ceil(data.total / pageSize), render);
    });
};
render(); // 渲染页面函数

function showData(list) {
    var str = "";
    for (var i = 0; i < list.length; i++) {
        str = "<tr><td>" + (i + 1) + "</td><td>" + list[i].name + "</td><td>" + list[i].sex + "</td><td>" + list[i].source + "</td><td>" + list[i].factions + "</td></tr>"
        $('#userContent').append(str);
    }
}

 二、前台使用BootStrap_table

效果：

1.前台jsp: 引入BootStrap _table.js

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户</title>
<%
    pageContext.setAttribute("URL_PATH", request.getContextPath());
%>
<link href="${URL_PATH}/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link href="${URL_PATH}/bootstrap-3.3.7-dist/css/bootstrap-table.css" rel="stylesheet">
<script src="${URL_PATH}/js/jquery-1.9.1.min.js"></script>
<script src="${URL_PATH}/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="${URL_PATH}/bootstrap-3.3.7-dist/js/bootstrap-table.js"></script>
<script src="${URL_PATH}/bootstrap-3.3.7-dist/js/bootstrap-table-zh-CN.js"></script>
<script src="${URL_PATH}/js/user.js"></script>
<script src="${URL_PATH}/js/page.js"></script>

</head>
<body>
    <form action="" id="pageParamForm">
        名称： <input type="text" id="name" name="name"> 
        种族： <input type="text" id="factions" name="factions">
        <input type="button" class="btn btn-primary btn_search" value="搜索" onclick="queryBtn()"/>
        <input type="reset" value="重置">
        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default">新增</button>
            <button id="btn_edit" type="button" class="btn btn-default">修改</button>
            <button id="btn_delete" type="button" class="btn btn-default">删除</button>
        </div>
    </form>
    
    <!-- 分页 -->
    <table id="tablePage"></table>
</body>
</html>

2.js;

$(function() {
    var url = '/userPage.action';
    var columns = [
        {
            checkbox : true,
            align : 'center',
            valign : 'middle'
        },
        {
            title : '序号',
            align : 'center',
            valign : 'middle',
            formatter : function(value, row, index) {
                return index + 1;
            }
        },
        {
            title : '姓名',
            field : 'name',
            align : 'center',
            valign : 'middle'
        },
        {
            title : '性别',
            field : 'sex',
            align : 'center',
            valign : 'middle'
        },
        {
            title : '来源',
            field : 'source',
            align : 'center',
            valign : 'middle'
        },
        {
            title : '种族',
            field : 'factions',
            align : 'center',
            valign : 'middle'
        },
        {
            title : '操作',
            field : 'id',
            align : 'center',
            formatter : function(value, row, index) {
                var e = '<button href="#" class="btn btn-primary"  onclick="edit(\'' + row.id + '\')">编辑</button> ';
                var d = '<button href="#" class="btn btn-danger"  onclick="del(\'' + row.id + '\')">删除</button> ';
                return e + d;
            }
        }
    ]
    showpage(url, columns);
})
$(function() {
    showpage();
});

function showpage(url, columns) {
    $("#tablePage").bootstrapTable({
        url : url,
        dataType : "json",
        method : 'post', //请求方式（*）
        contentType : "application/x-www-form-urlencoded", //需要设置为这个参数，后台才能通过对象获取值,这里要注意
        striped : true, //隔行变色
        toobar:'#toobar',//工具按钮使用哪个容器
        cache : false, //是否使用缓存
        showColumns : false,
        pagination : true, //是否显示分页
        paginationLoop : false,
        paginationPreText : '上一页',
        paginationNextText : '下一页',
        //showFooter : true, //显示列脚
        showPaginationSwitch : false, //是否显示数据条数选择框
        sortable : false, //是否启用排序
        sortOrder:'asc',
        singleSelect : false,
        search : true, //显示搜索框
        buttonsAlign : "right", //按钮对齐方式
        showRefresh : true, //是否显示刷新按钮
        sidePagination : "server", //服务端处理分页
        pageNumber : 1,
        pageSize : 5,
        pageList : [ 5, 10, 25, 50 ],
        undefinedText : '',
        uniqueId : "id", //每一行的唯一标识，一般为主键列
        queryParamsType : '',
        queryParams : queryParams, //传递参数（*）
        responseHandler : function(res) {
            //在ajax获取到数据，渲染表格之前，修改数据源,改成bootstrap-table需要的数据格式
            var nres = [];
            nres.push({
                total : res.total,
                rows : res.list
            });
            return nres[0];
        },
        columns : columns
    });
    function queryParams(params) {
         var param = $("#pageParamForm").serializeJsonObject(); 
         param["pageSize"]=params.pageSize;
         param["pageNum"]=params.pageNumber;
        return param;
    }
}
//点击“查询”按钮
function queryBtn(){
    $("#tablePage").bootstrapTable('refreshOptions',{pageNumber:1});
}
$.fn.serializeJsonObject = function() {  
    var json = {};  
    var form = this.serializeArray();  
    $.each(form, function() {  
        if (json[this.name]) {  
            if (!json[this.name].push) {  
                json[this.name] = [ json[this.name] ];  
            }  
            json[this.name].push( );  
        } else {  
            json[this.name] = this.value || '';  
        }  
    });  
    return json;  
}