BootStrap Table實(shí)現(xiàn)server分頁序號連續(xù)顯示功能（當(dāng)前頁從上一頁的結(jié)束序號開始）
更新時間：2017年09月12日 11:30:56 作者：youand_me
這篇文章主要介紹了BootStrap Table實(shí)現(xiàn)server分頁序號連續(xù)顯示功能（當(dāng)前頁從上一頁的結(jié)束序號開始）,需要的朋友可以參考下
前言
- 在使用bootstrap table的時候難免會用到分頁，分頁它提供了兩種方式：client客戶端分頁、server服務(wù)端分頁兩種方式。
- 在項(xiàng)目中一般是不用client分頁的，一般表格數(shù)據(jù)量大，用client分頁會導(dǎo)致緩存爆炸，所以我們選擇server分頁。
- 存在即合理，client也是可以用的（數(shù)據(jù)量特別少的時候），相對于server方式，它的分頁序號是自動連續(xù)的。而server方式分頁的序號就不連續(xù)的了（每一頁都是從1開始，而不是從上一頁的結(jié)束序號開始），本文就著重解決這個問題。
原始分頁結(jié)果
- client分頁，使用bootstrap table的formatter中的index索引值可以使得序號是連續(xù)的，上圖：
這是第1頁的序號，為1-4。
這是第2頁的序號，為5-8。
- server分頁，由于缺乏當(dāng)前頁的位置pageNumber和每頁的大小pageSize,所以無法確定索引值，用formatter返回index就是只有當(dāng)前頁的索引。
這是server分頁的第1頁，序號為1-4。
這是server分頁的第5頁，序號也為1-4。
解決步驟
出現(xiàn)這個問題的原因是什么呢，由于我們使用的formatter返回的index參數(shù)，這個參數(shù)是表格的索引，client的所有n條總數(shù)據(jù)都在客戶端，index就為1-n，而server分頁每次服務(wù)器只返回的是當(dāng)前頁的數(shù)據(jù)到客戶端，所以index就只有1-pageSize，pageSize為一頁的數(shù)據(jù)量，所以就出現(xiàn)這個問題了。
針對server服務(wù)器只返回一頁的數(shù)據(jù)的原因?qū)е旅看畏摰男蛱柖紡?開始的問題，那么我們就需要把服務(wù)端和客戶端的頁面數(shù)據(jù)關(guān)聯(lián)起來，所以我們在原始的formatter的基礎(chǔ)上修改，讓它傳遞這個參數(shù)就ok了。
首先我們看boostrap table的js源碼，可以看到一些內(nèi)部函數(shù)的寫法，如：
BootstrapTable.prototype.showRow = function (params) {
this.toggleRow(params, true);
};
那么我們可以自己定義一個功能函數(shù)嗎？答案是肯定的，我們也照著寫一個返回我們需要的索引值的函數(shù)。定義如下：
BootstrapTable.prototype.getPage = function (param) {
return this.options.pageSize * this.options.pageNumber + 1;
}
我們能寫這個函數(shù)傳遞索引參數(shù)的原因是，pageSize和pageNumber本身就是bootstrap table的內(nèi)部參數(shù)，全部都集成在options中，所以你有這個參數(shù)我才能寫函數(shù)返回這個值。
寫好函數(shù)還得把這個函數(shù)寫進(jìn)內(nèi)部函數(shù)列表中，不然也用不了，如下把getIndex像它原來的函數(shù)那樣插入進(jìn)去（第四行）：
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方法，實(shí)現(xiàn)了分頁序號的連續(xù)（editable: {…}是行編輯，請查看我另一篇博客）：
$("tb_departments").bootstrapTable({
method: 'post', //請求方式
height: 500,
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個屬性（*）
pagination: true, //是否顯示分頁
sortable: true, //是否啟用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分頁方式：client客戶端分頁，server服務(wù)端分頁
pageNumber: 1, //初始化加載第一頁，默認(rèn)第一頁
pageSize: 4, //每頁的記錄行數(shù)（*）
pageList: [4, 20, 25, 30], //可供選擇的每頁的行數(shù)（*）
//search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會進(jìn)服務(wù)端，所以，個人感覺意義不大
strictSearch: true,
//showPaginationSwitch: true,
showExport: true,
exportDataType: "all",
showExport: true, //是否顯示導(dǎo)出按鈕
buttonsAlign:"right", //按鈕位置
exportTypes:[ 'csv', 'txt', 'excel', 'pdf'], //導(dǎo)出文件類型
Icons:'glyphicon-export',
showColumns: true, //是否顯示所有的列
showToggle:true, //是否顯示詳細(xì)視圖和列表視圖的切換按鈕
showExportAll:true, //是否顯示全部導(dǎo)出按鈕
showRefresh: false, //是否顯示刷新按鈕
minimumCountColumns: 1, //最少允許的列數(shù)
clickToSelect: true, //是否啟用點(diǎn)擊選中行
cardView: false, //是否顯示詳細(xì)視圖
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: '編號',//標(biāo)題
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: "車類明細(xì)"
}
],
onPageChange:function(number, size)
{
//設(shè)置在分頁事件觸發(fā)時，傳遞分頁參數(shù)給后臺，重新加載數(shù)據(jù)
me.queryBaseParam.limit=size;
me.queryBaseParam.start=number;
me.ajaxGetData();
},
onSort: function (name, order) {
//傳遞參數(shù)給后臺進(jìn)行排序
me.queryBaseParam.sort=name;
me.queryBaseParam.order=order;
me.ajaxGetData();
}
});
最后的結(jié)果和client分頁的序號是一樣的。
總結(jié)
以上所述是小編給大家介紹的BootStrap Table實(shí)現(xiàn)server分頁序號連續(xù)顯示功能（當(dāng)前頁從上一頁的結(jié)束序號開始），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript設(shè)計模式之建造者模式實(shí)例教程
這篇文章主要介紹了JavaScript設(shè)計模式之建造者模式,結(jié)合實(shí)例形式分析了設(shè)計模式中建造者模式的概念、功能及JavaScript實(shí)現(xiàn)與使用建造者模式的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要通過動畫的示例來為大家詳細(xì)介紹一下JavaScript的函數(shù)封裝，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下2022-03-03
本文主要介紹了layer彈出層中H5播放器全屏出錯解決&屬性poster底圖占滿video的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單秒表走動的時鐘特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
js關(guān)閉模態(tài)窗口刷新父頁面或跳轉(zhuǎn)頁面
點(diǎn)擊按鈕時，彈出B窗口（模態(tài)）。在B窗口中添加數(shù)據(jù)，提交后，要求B窗口自關(guān)閉，然后刷新A窗口（父），需要的朋友可以了解下2012-12-12
本文主要介紹了JavaScript 計算誤差的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
mvc 、bootstrap 結(jié)合分布式圖簡單實(shí)現(xiàn)分頁
這篇文章主要介紹了mvc 、bootstrap 結(jié)合分布式圖簡單實(shí)現(xiàn)分頁的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
layui table動態(tài)表頭 改變表格頭部 重新加載表格的方法
今天小編就為大家分享一篇layui table動態(tài)表頭 改變表格頭部 重新加載表格的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了簡化版手機(jī)端照片預(yù)覽組件的相關(guān)資料,需要的朋友可以參考下2015-04-04
js實(shí)現(xiàn)百度聯(lián)盟中一款不錯的圖片切換效果完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)百度聯(lián)盟中一款不錯的圖片切換效果的方法,以完整實(shí)例形式分析了javascript操作圖片切換的技巧,需要的朋友可以參考下2015-03-03