前言
開(kāi)原網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),開(kāi)原網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為開(kāi)原上1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢(qián),請(qǐng)找那個(gè)售后服務(wù)好的開(kāi)原做網(wǎng)站的公司定做!
原始分頁(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ù)都在客戶端,index就為1-n,而server分頁(yè)每次服務(wù)器只返回的是當(dāng)前頁(yè)的數(shù)據(jù)到客戶端,所以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ù)端和客戶端的頁(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客戶端分頁(yè),server服務(wù)端分頁(yè) pageNumber: 1, //初始化加載第一頁(yè),默認(rèn)第一頁(yè) pageSize: 4, //每頁(yè)的記錄行數(shù)(*) pageList: [4, 20, 25, 30], //可供選擇的每頁(yè)的行數(shù)(*) //search: true, //是否顯示表格搜索,此搜索是客戶端搜索,不會(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ì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
網(wǎng)站標(biāo)題:BootStrapTable實(shí)現(xiàn)server分頁(yè)序號(hào)連續(xù)顯示功能(當(dāng)前頁(yè)從上一頁(yè)的結(jié)束序號(hào)開(kāi)始)
文章網(wǎng)址:http://www.rwnh.cn/article12/ippsgc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、Google、自適應(yīng)網(wǎng)站、商城網(wǎng)站、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)