前言
在使用bootstrap table的时候难免会用到分页，分页它提供了两种方式：client客户端分页、server服务端分页两种方式。
在项目中一般是不用client分页的，一般表格数据量大，用client分页会导致缓存爆炸，所以我们选择server分页。
存在即合理，client也是可以用的（数据量特别少的时候），相对于server方式，它的分页序号是自动连续的。而server方式分页的序号就不连续的了（每一页都是从1开始，而不是从上一页的结束序号开始），本文就着重解决这个问题。
原始分页结果
client分页，使用bootstrap table的formatter中的index索引值可以使得序号是连续的
server分页，由于缺乏当前页的位置pagenumber和每页的大小pagesize,所以无法确定索引值，用formatter返回index就是只有当前页的索引。
解决步骤
出现这个问题的原因是什么呢，由于我们使用的formatter返回的index参数，这个参数是表格的索引，client的所有n条总数据都在客户端，index就为1-n，而server分页每次服务器只返回的是当前页的数据到客户端，所以index就只有1-pagesize，pagesize为一页的数据量，所以就出现这个问题了。
针对server服务器只返回一页的数据的原因导致每次翻页的序号都从1开始的问题，那么我们就需要把服务端和客户端的页面数据关联起来，所以我们在原始的formatter的基础上修改，让它传递这个参数就ok了。
首先我们看boostrap table的js源码，可以看到一些内部函数的写法，如：
bootstraptable.prototype.showrow = function (params) { this.togglerow(params, true); };
那么我们可以自己定义一个功能函数吗？答案是肯定的，我们也照着写一个返回我们需要的索引值的函数。定义如下：
bootstraptable.prototype.getpage = function (param) { return this.options.pagesize * this.options.pagenumber + 1; }
我们能写这个函数传递索引参数的原因是，pagesize和pagenumber本身就是bootstrap table的内部参数，全部都集成在options中，所以你有这个参数我才能写函数返回这个值。
写好函数还得把这个函数写进内部函数列表中，不然也用不了，如下把getindex像它原来的函数那样插入进去（第四行）：
var allowedmethods = [ 'getoptions', 'getselections', 'getallselections', 'getdata', 'getindex', 'load', 'append', 'prepend', 'remove', 'removeall', 'insertrow', 'updaterow', 'updatecell', 'updatebyuniqueid', 'removebyuniqueid', 'getrowbyuniqueid', 'showrow', 'hiderow', 'gethiddenrows', 'mergecells', 'checkall', 'uncheckall', 'checkinvert', 'check', 'uncheck', 'checkby', 'uncheckby', 'refresh', 'resetview', 'resetwidth', 'destroy', 'showloading', 'hideloading', 'showcolumn', 'hidecolumn', 'gethiddencolumns', 'getvisiblecolumns', 'showallcolumns', 'hideallcolumns', 'filterby', 'scrollto', 'getscrollposition', 'selectpage', 'prevpage', 'nextpage', 'togglepagination', 'toggleview', 'refreshoptions', 'resetsearch', 'expandrow', 'collapserow', 'expandallrows', 'collapseallrows', 'updateformattext' ];
这样我们就可以在表中使用，在formatter中使用了getindex方法，实现了分页序号的连续（editable: {…}是行编辑，请查看我另一篇博客）：
$(tb_departments).bootstraptable({ method: 'post', //请求方式 height: 500, toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页 sortable: true, //是否启用排序 sortorder: asc, //排序方式 sidepagination: server, //分页方式：client客户端分页，server服务端分页 pagenumber: 1, //初始化加载第一页，默认第一页 pagesize: 4, //每页的记录行数（*） pagelist: [4, 20, 25, 30], //可供选择的每页的行数（*） //search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 strictsearch: true, //showpaginationswitch: true, showexport: true, exportdatatype: all, showexport: true, //是否显示导出按钮 buttonsalign:right, //按钮位置 exporttypes:[ 'csv', 'txt', 'excel', 'pdf'], //导出文件类型 icons:'glyphicon-export', showcolumns: true, //是否显示所有的列 showtoggle:true, //是否显示详细视图和列表视图的切换按钮 showexportall:true, //是否显示全部导出按钮 showrefresh: false, //是否显示刷新按钮 minimumcountcolumns: 1, //最少允许的列数 clicktoselect: true, //是否启用点击选中行 cardview: false, //是否显示详细视图 detailview: false, //是否显示父子表 showheader: true, oneditablesave: function (field, row, oldvalue, $el) { $.ajax({ success: function (data, status) { if (status == success) { alert(编辑成功); } }, error: function () { alert(error); }, complete: function () { } }); }, columns: [ { title: '编号',//标题 formatter: function (value, row, index) { return $(tb_departments).bootstraptable(getindex); } }, { align: left,//水平居中 halign: left,//垂直居中 field: vehplate, title: 车牌号码, editable: { type: 'text', title: 车牌号码, noeditformatter: function (value,row,index) { var result={filed:vehplate,value:value}; return result; }, validate: function (value) { if ($.trim(value) == '') { return '车牌号码不能为空!'; } } } },{ align: left, halign: left, field: price, sortable:true, title: 原值(万元), editable: { type: 'text', title: 原值(万元), noeditformatter: function (value,row,index) { var result={filed:price,value:value,class:badge bg-green,style:padding:5px 10px;}; return result; } } }, { align: left, halign: left, field: netvalue, sortable:true, title: 净值(万元), editable: { type: 'text', title: 净值(万元), noeditformatter: function (value,row,index) { var result={filed:netvalue,value:value,class:badge bg-orange,style:padding:5px 10px;}; return result; } } }, { align: left, halign: left, field: accumulatedmileage, sortable:true, title: 累计里程, editable: { type: 'text', title: 累计里程, noeditformatter: function (value,row,index) { var result={filed:accumulatedmileage,value:value}; return result; } } }, { align: left, halign: left, field: accumulateddepreciation, sortable:true, title: 累计折旧(万元), editable: { type: 'text', title: 累计折旧(万元), noeditformatter: function (value,row,index) { var result={filed:accumulateddepreciation,value:value}; return result; } } }, { align: left, halign: left, field: vehclass, title: 车型 }, { align: left, halign: left, field: vehtype1desc, title: 车类 }, { align: left, halign: left, field: vehtype2desc, //width: 100, title: 车类明细 } ], onpagechange:function(number, size) { //设置在分页事件触发时，传递分页参数给后台，重新加载数据 me.querybaseparam.limit=size; me.querybaseparam.start=number; me.ajaxgetdata(); }, onsort: function (name, order) { //传递参数给后台进行排序 me.querybaseparam.sort=name; me.querybaseparam.order=order; me.ajaxgetdata(); } });
最后的结果和client分页的序号是一样的。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js+canvas绘制饼状统计图
js实现字符限制中文汉字=两个字符
以上就是bootstrap+table排序分页序号的详细内容。