BootStrapTable實(shí)現(xiàn)server分頁序號連續(xù)顯示功能(當(dāng)前頁從上一頁的結(jié)束序號開始)

前言

開原網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),開原網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為開原上1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢,請找那個售后服務(wù)好的開原做網(wǎng)站的公司定做!

  • 在使用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ù)的,上圖:

BootStrap Table實(shí)現(xiàn)server分頁序號連續(xù)顯示功能(當(dāng)前頁從上一頁的結(jié)束序號開始)

這是第1頁的序號,為1-4。

BootStrap Table實(shí)現(xiàn)server分頁序號連續(xù)顯示功能(當(dāng)前頁從上一頁的結(jié)束序號開始)

這是第2頁的序號,為5-8。

  • server分頁,由于缺乏當(dāng)前頁的位置pageNumber和每頁的大小pageSize,所以無法確定索引值,用formatter返回index就是只有當(dāng)前頁的索引。

BootStrap Table實(shí)現(xiàn)server分頁序號連續(xù)顯示功能(當(dāng)前頁從上一頁的結(jié)束序號開始)

這是server分頁的第1頁,序號為1-4。

BootStrap Table實(shí)現(xiàn)server分頁序號連續(xù)顯示功能(當(dāng)前頁從上一頁的結(jié)束序號開始)

這是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: "累計(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ì)折舊(萬元)",
     editable: {
      type: 'text',
      title: "累計(jì)折舊(萬元)",
      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ù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!

網(wǎng)站標(biāo)題:BootStrapTable實(shí)現(xiàn)server分頁序號連續(xù)顯示功能(當(dāng)前頁從上一頁的結(jié)束序號開始)
文章網(wǎng)址:http://muchs.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)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都做網(wǎng)站