关于bootstrapTable分页的那些事儿

bootstrapTable分页可分为服务端分页和客户端分页两种。

客户端分页

---

客户端分页是在表格数据加载完成后，在前端实现的分页方式。由于其实现方式的局限性，考虑到性能问题，这种方式比较适用于数据量较小的表格。若表格需要显示的数据量很大，则更加建议采用服务端分页的方式。下面来撸代码……

$("#table_server").bootstrapTable({
    url: url,//数据地址
    method: 'get',// 请求方式
    dataType: "json",// 数据类型
    pagination: true, //开启分页
    pageNumber: 1,//首页页码
    pageSize: 100,//每页显示记录数
    pageList: [50, 100],  //可供选择的页面数据条数。设置为All则显示所有记录（即不分页）。
    paginationPreText: '<',//指定分页条中上一页按钮的图标或文字,这里是<
    paginationNextText: '>',//指定分页条中下一页按钮的图标或文字,这里是>
    paginationLoop: false,// 页码循环跳转（即最后一页的下一页是第一页）
    sidePagination: "client", //分页方式：client客户端分页，server服务端分页
   	columns: [{
      ......
      // 此处代码省略
   	}]
});

这里需要的数据格式为普通的json数组：[{},{},{},...]

---

服务端分页

---

正如上文所言，服务端能够胜任较大数据量的分页任务。实现原理是服务器告知bootstrapTable总的数据条数，然后由bootstrapTable完成分页工作，即总共分多少也，每一页显示多少条数据等，bootstrapTable依次将当前页的页码以及显示记录数传递给服务端，由服务端获取到分页后的数据响应到客户端，完成显示。下面来撸代码……

$("#table_server").bootstrapTable({
    url: url,//数据地址
    method: 'get',// 请求方式
    dataType: "json",// 数据类型
    pagination: true, //开启分页
    pageNumber: 1,//首页页码
    pageSize: 100,//每页显示记录数
    pageList: [50, 100],  //可供选择的页面数据条数。设置为All则显示所有记录（即不分页）。
    paginationPreText: '<',//指定分页条中上一页按钮的图标或文字,这里是<
    paginationNextText: '>',//指定分页条中下一页按钮的图标或文字,这里是>
    paginationLoop: false,// 页码循环跳转（即最后一页的下一页是第一页）
    sidePagination: "server", //分页方式：client客户端分页，server服务端分页
    queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset, limit, sort
    // 设置为 '' 则传给服务器的参数为：pageSize, pageNumber
    queryParams: function (params) {
        //前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数
        return {
             //这里的params是table提供的
             pageNumber: params.offset,//从数据库第几条记录开始
             pageSize: params.limit,//找多少条
             type:"2" // 自定义的参数，后台需要的
        };
     },
   	columns: [{
      ......
      // 此处代码省略
   	}]
});

服务端需要返回的数据格式：{“total”:总数据条数,”rows”:[当前页的数据内容数组]}

这里要强调一点，queryParamsType有两种取值，若为默认值即'limit'，则queryParams中传递的数据项为：
{"search":"","order":"asc","offset":0,"limit":10}

若设置为'',则数据项为： {"searchText":"","sortOrder":"asc","pageSize":10,"pageNumber":1}