bootstrapTable 自定义序号与分页查询

     最近这段时间使用bootstrap比较多，期间在使用bootStrapTable时遇到分页上无法点击选择每页显示条数，原来时需要papper.js ,但是引了一个后发现与当前系统引入的bootStrap.table.js 不兼容，所以研究了一下，自定义了分页查询和数据前的序号计算，在这里贴出来，与大家互相借鉴，互相学习。

  1、     使用了 thymeLeaf代码片段，分页代码如下：

<div th:fragment="page-size" class="col-sm-10 " style="right:-98px" th:align="right">
    <label   >每页显示条数：</label>
    <select type="text"   required="true"  id="pageSize"  >
        <option value="10" selected="selected" >10</option>
        <option value="20" >20</option>
        <option value="50" >50</option>
    </select>
</div>

//对代码片段的引用

<div th:replace="/layout/fragment :: page-size"></div>

2、table 初始化代码如下：

$('#tb_rights').bootstrapTable({
        method: 'post',
        contentType: "application/x-www-form-urlencoded;charset=UTF-8",//必须要有！！！！
        url: '/rightsInfo/getRightsInfoList',//要请R求数据的文件路径
        toolbar: '#userToolbar',//指定工具栏
        striped: true,  //是否显示行间隔色
        //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的
        //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
        pageNumber: 1, //初始化加载第一页，默认第一页
        pagination: true,//是否分页
        queryParamsType: 'limit',//查询参数组织方式
        queryParams: userRights.queryParams,//请求服务器时所传的参数
        sidePagination: 'server',//指定服务器端分页
        pageSize: $("#pageSize").val(),//单页记录数
        smartDisplay:false,
        //pageList: [5, 10, 20, 30],//分页步进值
        clickToSelect: true,//是否启用点击选中行
        columns: [{
            checkbox: true
        },{
            field: 'num',
            title: '序号',
            formatter:function(value,row,index){
                return tableIndexNum(index);
            }
        },{
            field: 'yuname',
            title: '用户域名'
        }, {
            field: 'userName',
            title: '用户名'
        }, {
            field: 'sysId',
            title: '系统编号'
        }, {
            field: 'sysName',
            title: '系统名称'
        }, {
            field: 'pathName',
            title: '路径名称'
        }, {
            field: 'pathUrl',
            title: '访问路径'
        }, {
            field: 'status',
            title: '状态',
            formatter: function (value, row, index) {
                var sta = '';
                if (value == 0) {
                    sta = '可用状态';
                }
                if (value == 1) {
                    sta = '禁用状态';
                }
                return sta;
            }
        },{
            field:'opt',
            title:'操作',
            formatter:function(value,row,index){
                if(row.status==0){
                    return '<a href="#" onclick="updateStatus('+row.id+',1)" >禁用</a>';
                }
                if(row.status!=0){
                    return '<a href="#" onclick="updateStatus('+row.id+',0)" >可用</a>';
                }
            }
        }]
    });
},
//请求服务数据时所传参数
queryParams: function (params) {
    var param = {};
    $('#rightsSearchForm').find('[name]').each(function () {
        var value = $(this).val();
        if (value != '') {
            param[$(this).attr('name')] = value;
        }
    });
    param['pageSize'] = $("#pageSize").val();   //页面大小
    param['page'] = params.offset;   //页码

    return param;
},
reSearch: function () {
    $('#tb_rights').bootstrapTable('destroy');
    userRights.tableInit();
},

    其中 以下两个地方的使用不能少，第一个用于计算显示表格下方的信息： 显示第 1 到第 10 条记录，总共 12 条记录；第二个用于真正的分页查询参数

pageSize: $("#pageSize").val(),//单页记录数

 param['pageSize'] = $("#pageSize").val();   //页面大小

3、在对每页显示条数进行变更时，使用函数刷新数据：

$("#pageSize").change(function(){
    userRights.reSearch();
});

在刷新数据时必须先将table销毁，在重新初始化，不然表格下方显示信息会计算出错

4、序号显示计算具体函数如下：

F12查看table显示如下,其中当前页码是class="page-item active" 的li标签中的a标签中的text数值，所以函数按如下计算：

//计算序号
function tableIndexNum(index){
    var currentPage=$(".page-item.active").find('a').text();
    return Number(index+1+eval((currentPage-1)*$("#pageSize").val()));
}

此处需要加一个Number(),不然在序号显示的地方会显示NAN，序号显示效果如下：