您好,登錄后才能下訂單哦!
前言
原始分頁(yè)結(jié)果
這是第1頁(yè)的序號(hào),為1-4。
這是第2頁(yè)的序號(hào),為5-8。
這是server分頁(yè)的第1頁(yè),序號(hào)為1-4。
這是server分頁(yè)的第5頁(yè),序號(hào)也為1-4。
解決步驟
出現(xiàn)這個(gè)問(wèn)題的原因是什么呢,由于我們使用的formatter返回的index參數(shù),這個(gè)參數(shù)是表格的索引,client的所有n條總數(shù)據(jù)都在客戶(hù)端,index就為1-n,而server分頁(yè)每次服務(wù)器只返回的是當(dāng)前頁(yè)的數(shù)據(jù)到客戶(hù)端,所以index就只有1-pageSize,pageSize為一頁(yè)的數(shù)據(jù)量,所以就出現(xiàn)這個(gè)問(wèn)題了。
針對(duì)server服務(wù)器只返回一頁(yè)的數(shù)據(jù)的原因?qū)е旅看畏?yè)的序號(hào)都從1開(kāi)始的問(wèn)題,那么我們就需要把服務(wù)端和客戶(hù)端的頁(yè)面數(shù)據(jù)關(guān)聯(lián)起來(lái),所以我們?cè)谠嫉膄ormatter的基礎(chǔ)上修改,讓它傳遞這個(gè)參數(shù)就ok了。
首先我們看boostrap table的js源碼,可以看到一些內(nèi)部函數(shù)的寫(xiě)法,如:
BootstrapTable.prototype.showRow = function (params) { this.toggleRow(params, true); };
那么我們可以自己定義一個(gè)功能函數(shù)嗎?答案是肯定的,我們也照著寫(xiě)一個(gè)返回我們需要的索引值的函數(shù)。定義如下:
BootstrapTable.prototype.getPage = function (param) { return this.options.pageSize * this.options.pageNumber + 1; }
我們能寫(xiě)這個(gè)函數(shù)傳遞索引參數(shù)的原因是,pageSize和pageNumber本身就是bootstrap table的內(nèi)部參數(shù),全部都集成在options中,所以你有這個(gè)參數(shù)我才能寫(xiě)函數(shù)返回這個(gè)值。
寫(xiě)好函數(shù)還得把這個(gè)函數(shù)寫(xiě)進(jìn)內(nèi)部函數(shù)列表中,不然也用不了,如下把getIndex像它原來(lái)的函數(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)了分頁(yè)序號(hào)的連續(xù)(editable: {…}是行編輯,請(qǐng)查看我另一篇博客):
$("tb_departments").bootstrapTable({ method: 'post', //請(qǐng)求方式 height: 500, toolbar: '#toolbar', //工具按鈕用哪個(gè)容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存,默認(rèn)為true,所以一般情況下需要設(shè)置一下這個(gè)屬性(*) pagination: true, //是否顯示分頁(yè) sortable: true, //是否啟用排序 sortOrder: "asc", //排序方式 sidePagination: "server", //分頁(yè)方式:client客戶(hù)端分頁(yè),server服務(wù)端分頁(yè) pageNumber: 1, //初始化加載第一頁(yè),默認(rèn)第一頁(yè) pageSize: 4, //每頁(yè)的記錄行數(shù)(*) pageList: [4, 20, 25, 30], //可供選擇的每頁(yè)的行數(shù)(*) //search: true, //是否顯示表格搜索,此搜索是客戶(hù)端搜索,不會(huì)進(jìn)服務(wù)端,所以,個(gè)人感覺(jué)意義不大 strictSearch: true, //showPaginationSwitch: true, showExport: true, exportDataType: "all", showExport: true, //是否顯示導(dǎo)出按鈕 buttonsAlign:"right", //按鈕位置 exportTypes:[ 'csv', 'txt', 'excel', 'pdf'], //導(dǎo)出文件類(lèi)型 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: '編號(hào)',//標(biāo)題 formatter: function (value, row, index) { return $("tb_departments").bootstrapTable("getIndex"); } }, { align: "left",//水平居中 halign: "left",//垂直居中 field: "vehplate", title: "車(chē)牌號(hào)碼", editable: { type: 'text', title: "車(chē)牌號(hào)碼", noeditFormatter: function (value,row,index) { var result={filed:"vehplate",value:value}; return result; }, validate: function (value) { if ($.trim(value) == '') { return '車(chē)牌號(hào)碼不能為空!'; } } } },{ align: "left", halign: "left", field: "price", sortable:true, title: "原值(萬(wàn)元)", editable: { type: 'text', title: "原值(萬(wàn)元)", 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: "凈值(萬(wàn)元)", editable: { type: 'text', title: "凈值(萬(wàn)元)", 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: "累計(jì)里程", editable: { type: 'text', title: "累計(jì)里程", noeditFormatter: function (value,row,index) { var result={filed:"accumulatedmileage",value:value}; return result; } } }, { align: "left", halign: "left", field: "accumulateddepreciation", sortable:true, title: "累計(jì)折舊(萬(wàn)元)", editable: { type: 'text', title: "累計(jì)折舊(萬(wàn)元)", noeditFormatter: function (value,row,index) { var result={filed:"accumulateddepreciation",value:value}; return result; } } }, { align: "left", halign: "left", field: "vehClass", title: "車(chē)型" }, { align: "left", halign: "left", field: "vehtype1Desc", title: "車(chē)類(lèi)" }, { align: "left", halign: "left", field: "vehtype2Desc", //width: 100, title: "車(chē)類(lèi)明細(xì)" } ], onPageChange:function(number, size) { //設(shè)置在分頁(yè)事件觸發(fā)時(shí),傳遞分頁(yè)參數(shù)給后臺(tái),重新加載數(shù)據(jù) me.queryBaseParam.limit=size; me.queryBaseParam.start=number; me.ajaxGetData(); }, onSort: function (name, order) { //傳遞參數(shù)給后臺(tái)進(jìn)行排序 me.queryBaseParam.sort=name; me.queryBaseParam.order=order; me.ajaxGetData(); } });
最后的結(jié)果和client分頁(yè)的序號(hào)是一樣的。
總結(jié)
以上所述是小編給大家介紹的BootStrap Table實(shí)現(xiàn)server分頁(yè)序號(hào)連續(xù)顯示功能(當(dāng)前頁(yè)從上一頁(yè)的結(jié)束序號(hào)開(kāi)始),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。