首頁 > web前端 > js教程 > 主體

BootStrap+Table排序分頁序號

php中世界最好的语言
發布: 2018-04-18 09:14:38
原創
2964 人瀏覽過

這次帶給大家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中文網其它相關文章!

推薦閱讀:

JS canvas繪製餅狀統計圖

js實作字元限制中文漢字=兩個字符

以上是BootStrap+Table排序分頁序號的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板