溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

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

發(fā)布時(shí)間:2020-09-20 14:09:01 來(lái)源:腳本之家 閱讀:142 作者:youand_me 欄目:web開(kāi)發(fā)

前言

  • 在使用bootstrap table的時(shí)候難免會(huì)用到分頁(yè),分頁(yè)它提供了兩種方式:client客戶(hù)端分頁(yè)、server服務(wù)端分頁(yè)兩種方式。
  • 在項(xiàng)目中一般是不用client分頁(yè)的,一般表格數(shù)據(jù)量大,用client分頁(yè)會(huì)導(dǎo)致緩存爆炸,所以我們選擇server分頁(yè)。
  • 存在即合理,client也是可以用的(數(shù)據(jù)量特別少的時(shí)候),相對(duì)于server方式,它的分頁(yè)序號(hào)是自動(dòng)連續(xù)的。而server方式分頁(yè)的序號(hào)就不連續(xù)的了(每一頁(yè)都是從1開(kāi)始,而不是從上一頁(yè)的結(jié)束序號(hào)開(kāi)始),本文就著重解決這個(gè)問(wèn)題。

原始分頁(yè)結(jié)果

  • client分頁(yè),使用bootstrap table的formatter中的index索引值可以使得序號(hào)是連續(xù)的,上圖:

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

這是第1頁(yè)的序號(hào),為1-4。

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

這是第2頁(yè)的序號(hào),為5-8。

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

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

這是server分頁(yè)的第1頁(yè),序號(hào)為1-4。

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

這是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)站的支持!

向AI問(wèn)一下細(xì)節(jié)

免責(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)容。

AI