這次帶給大家BootStrap Table排序分頁序號,BootStrap Table排序分頁序號的注意事項有哪些,下面就是實戰案例,一起來看一下。
前言
# 在使用bootstrap table的時候難免會用到分頁,分頁它提供了兩種方式:client客戶端分頁、server服務端分頁兩種方式。
在專案中一般是不用client分頁的,一般表格資料量大,用client分頁會導致快取爆炸,所以我們選擇server分頁。
存在即合理,client也是可以用的(資料量特別少的時候),相對於server方式,它的分頁序號是自動連續的。而server方式分頁的序號就不連續的了(每一頁都是從1開始,而不是從上一頁的結束序號開始),本文就著重解決這個問題。
原始分頁結果
client分頁,使用bootstrap table的formatter中的index索引值可以使得序號是連續的
server分頁,由於缺乏當前頁的位置pageNumber和每頁的大小pageSize,所以無法確定索引值,用formatter返回index就是只有當前頁的索引。
解決步驟
出現這個問題的原因是什麼呢,由於我們使用的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分頁的序號是一樣的。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是BootStrap+Table排序分頁序號的詳細內容。更多資訊請關注PHP中文網其他相關文章!