bootstrap-table 服务端分页

快速上手:

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

html
  • 引入相关js

    
    
    
  • 添加table标签 放body里
放入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串)

)

你可能感兴趣的:(bootstrap-table 服务端分页)