bootstrap-table表格分页的时候需要每页显示不同条数的数据

在项目中由于特殊需要,每页显示的数据条数是不一样的,如第一页显示的是10条数据,那么第二页有可能显示的就是20天,第三页显示的就是13条,由于传统的bootstraptable每页显示的是固定页数的值,所以无法实现这个目的

解决办法,引入

bootstrap-paginator.min.js

分页插件,将分页单独管控起来,插件可以在网上自行下载

至于每页显示的条数,我的解决办法是给bootstrap-table配置的pageSize设置成一个较大的值,意思就是每次请求不管返回的是10条,还是30条还是100条都全部显示(因为每一页显示的数据是不固定的,只能返回多少条就显示多少条,事先是不知道的)

 pagination: false,
 pageSize: 10000,
 pageList: [10, 15, 20, 25],

禁用掉bootstrap-table的分页

然后初始化bootstrap-paginator的分页

var currentPage = 1;
var pageCurrent = 1;
var pageSum = Number('${message_count}')//总页数事先获得
        $("#pagination").bootstrapPaginator({
            bootstrapMajorVersion: 3,
            currentPage: pageCurrent,// 显示第几页
            totalPages: pageSum,// 总页数
            numberOfPages:100,
            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) {
                // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
                currentPage = page
                $('#detailTable').bootstrapTable('refresh')
            }

这里需要注意一下,因为表格的请求参数中pageNumber:currentPage,所以当currentPage更新的时候,然后刷新表格,获取的就是当前页码对应的数据

你可能感兴趣的:(个人总结)