最近這段時間使用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();
},

pageSize: $("#pageSize").val(),//單頁記錄數

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

3、在對每頁顯示條數進行變更時，使用函式重新整理資料：

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

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，序號顯示效果如下：