BootStrapTable实现server分页序号连续显⽰功能（当前页从上⼀页的结束序号开始）
前⾔
在使⽤bootstrap table的时候难免会⽤到分页，分页它提供了两种⽅式：client客户端分页、server服务端分页两种⽅式。
在项⽬中⼀般是不⽤client分页的，⼀般表格数据量⼤，⽤client分页会导致缓存爆炸，所以我们选择server分页。
存在即合理，client也是可以⽤的（数据量特别少的时候），相对于server⽅式，它的分页序号是⾃动连续的。⽽server ⽅式分页的序号就不连续的了（每⼀页都是从1开始，⽽不是从上⼀页的结束序号开始），本⽂就着重解决这个问题。
原始分页结果
client分页，使⽤bootstrap table的formatter中的index索引值可以使得序号是连续的，上图：
这是第1页的序号，为1-4。
这是第2页的序号，为5-8。
server分页，由于缺乏当前页的位置pageNumber和每页的⼤⼩pageSize，所以⽆法确定索引值，⽤formatter返回index就是只有当前页的索引。
这是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) {
bootstrap项目};
那么我们可以⾃⼰定义⼀个功能函数吗？答案是肯定的，我们也照着写⼀个返回我们需要的索引值的函数。定义如下：
Page = 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: "车型"
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论