快速上手:

只需要配置HTML，js ，controller以及持久化层的分页查询。

html

• 引入相关js

<!--bootstrap插件-->
    <link rel="stylesheet" type="text/css" th:href="@{/js/plugins/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/js/plugins/bootstrap/bootstrap/css/bootstrap-theme.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/js/plugins/bootstrap/bootstrap-table/bootstrap-table.min.css}"/>

• 添加table标签 放body里

<table id="mytab" class="table table-hover"></table>

放入table标签

js

• 添加bootstrap组件(这里用最简单的，后续若有复杂样式，请看官网API)

//bootstrapTable组件
    $('#mytab1').bootstrapTable({
        method : 'get',
        url : "../getPage/queryChampionsDate1",//请求路径
        striped : false, //是否显示行间隔色
        pageNumber : 1, //初始化加载第一页
        pagination : true,//是否分页
        sidePagination : 'server',//server:服务器端分页|client：前端分页
        pageSize : 10,//单页记录数
        pageList : [ 5, 10, 20, 30 ,50],//可选择单页记录数
        showRefresh : true,//刷新按钮
        queryParams : function(params) {//上传服务器的参数
            var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
                limit : params.limit, // 每页显示数量
                offset : params.offset, // SQL语句起始索引

                STAFF_ID : $("#staffId").val(),
                STAFF_NAME : $("#userName").val(),
                MOBILE:$("#MOBILE").val()
            };
            return temp;
        },
        columns : [ {
            field: "state",
            checkbox: true,
            align: 'center',
        }, {
            title : '姓名',
            field : 'name',
            //sortable : true
        } ]
    });

对比前端分页这里变更的内容不多如下图

image.png

其中 下边内容是必须的

limit : params.limit, // 每页显示数量
offset : params.offset, // SQL语句起始索引

controller

-获取前台数据 （dao层代码省略）

  /**
     * 数据请求
     * @param request
     * @return
     */
    @RequestMapping("/queryChampionsDate1")
    @ResponseBody
    public JSONObject queryChampionsDate1(HttpServletRequest request, HttpServletResponse response){
        JSONObject res = new JSONObject();
        JSONArray resArray = new JSONArray();
        //id 姓名 属性 联系电话 商盟地址 创建日期
        for (int i = 0; i<10 ;i++){
            JSONObject resIndex = new JSONObject();
            resIndex.put("name","李四端"+i);
            resArray.add(resIndex);
        }
        res.put("total",33);
        res.put("rows",resArray);
        return res;
    }

有这些代码可见，

共33条，每页10条，页面会分4页如下图

image.png

其中 controller层返回是必须是带有total和rows的json串

res.put("total",33);
res.put("rows",resArray);

拓展：一般公司中前后台传值不会是这种，大部分都是带有编码的自定义的返回值，这时候怎么办？

• 如下格式

{
    "CODE": "0000",
    "DATA": {
        "TOTAL": 4,
        "PAGE_INDEX": 0,
        "PAGE_SIZE": 4,
        "LEADER_INFO": [
            {
                "STAFF_ID": "hasc-yangsq17",
                "STAFF_NAME": "张三",
                "MOBILE": "13288888888"
            },
            {
                "STAFF_ID": "ha-zhangmeng16",
                "STAFF_NAME": "张三",
                "MOBILE": "13288888888"
            }
        ]
    },
    "DESC": "调用成功"
}

bootstrap-table提供了处理这种数据responseHandler的方法。

• 处理上述数据(res用来接收controller传来的json串)

//对返回数据加工
            responseHandler: function(res) {
                if("0000"==res.CODE){
                    return {
                        "total": res.DATA.TOTAL,//总页数
                        "rows": res.DATA.LEADER_INFO  //数据
                    };
                }else {
                    alert(res.DESC);
                    return {
                        "total": 0,//总页数
                        "rows": []   //数据
                    };
                }
            },

处理完毕！

bootstrap-table服务端分页插件可接受的返回值为带有total和rows的json串，所以要使用bootstrap-table服务端分页插件，就必须处理数据格式为带有total和rows的json串。

前端分页

SSM整合dome（使用idea搭建maven项目返回前台json串）

)