前言
原始分页结果
这是第1页的序号，为1-4。
这是第2页的序号，为5-8。
这是server分页的第1页，序号为1-4。
这是server分页的第5页，序号也为1-4。
解决步骤
出现这个问题的原因是什么呢，由于我们使用的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分页的序号是一样的。
总结
以上所述是小编给大家介绍的bootstrap table实现server分页序号连续显示功能（当前页从上一页的结束序号开始），希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json？Protocol Buffer？FlatBuffers？
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
网友评论