BootStrap+Tabellensortierungs-Paging-Sequenznummer

Dieses Mal bringe ich Ihnen BootStrap+Tabellensortierungs- und Paginierungsseriennummer und was sind die Notizen von BootStrap+Tabellensortierungs- und Paginierungsseriennummer Das Folgende ist eine praktische Fall, werfen wir einen Blick darauf.

Vorwort

• Wenn Sie die Bootstrap-Tabelle verwenden, verwenden Sie zwangsläufig zwei Methoden: Client-Paging und Server-Paging.

• Client-Paging wird in Projekten im Allgemeinen nicht verwendet. Da die Menge der Tabellendaten im Allgemeinen groß ist und die Verwendung von Client-Paging zu einer Cache-Explosion führt, wählen wir Server-Paging.

• ist sinnvoll, wenn es vorhanden ist, und der Client kann auch verwendet werden (wenn die Datenmenge im Vergleich zur Servermethode besonders gering ist). Sequenznummern sind automatisch fortlaufend. Die Seriennummern beim Paging im Servermodus sind nicht fortlaufend (jede Seite beginnt bei 1, nicht bei der Endseriennummer der vorherigen Seite).

Original paginierte Ergebnisse

• Durch Client-Paging kann die Seriennummer mithilfe des Indexwerts im Formatierer der Bootstrap-Tabelle fortlaufend werden

• Beim Server-Paging kann der Indexwert aufgrund der fehlenden aktuellen Seitenposition pageNumber und der pageSize nicht ermittelt werden. Mit dem Formatierer wird nur der Index der aktuellen Seite zurückgegeben.

Lösungsschritte

Was ist der Grund für dieses Problem? Da der von uns verwendete Indexparameter der Index der Tabelle ist, befinden sich alle n Daten des Clients auf dem Client, und der Index ist 1-n Server-Paging jedes Mal Der Server gibt nur die Daten der aktuellen Seite an den Client zurück, daher ist der Index nur 1-pageSize und pageSize ist die Datenmenge für eine Seite, sodass dieses Problem auftritt.

Angesichts des Problems, dass der Server nur eine Seite mit Daten zurückgibt, was dazu führt, dass die Seriennummer bei jedem Umblättern bei 1 beginnt, müssen wir die Seitendaten des Servers und des Clients verknüpfen und sie daher entsprechend ändern Lassen Sie beim ursprünglichen Formatierer diesen Parameter übergeben, dann ist alles in Ordnung.

Schauen wir uns zunächst den js-Quellcode der Boostrap-Tabelle an. Wir können einige Schreibmethoden für interne Funktionen sehen, wie zum Beispiel:

 BootstrapTable.prototype.showRow = function (params) {
  this.toggleRow(params, true);
 };

Können wir also selbst eine funktionale Funktion definieren? Die Antwort lautet: Ja, wir werden auch eine Funktion schreiben, die den benötigten Indexwert zurückgibt. Die Definition lautet wie folgt:

 BootstrapTable.prototype.getPage = function (param) {
  return this.options.pageSize * this.options.pageNumber + 1;
 }

Der Grund, warum wir diese Funktion schreiben können, um den Indexparameter zu übergeben, liegt darin, dass pageSize und pageNumber selbst interne Parameter der Bootstrap-Tabelle sind und alle in Optionen integriert sind. Wenn Sie also diesen Parameter haben, kann ich die Funktion schreiben, um dies zurückzugeben Wert.

Nachdem Sie eine Funktion geschrieben haben, müssen Sie diese Funktion in die interne Funktionsliste schreiben, sonst wird sie nicht wie ihre ursprüngliche Funktion wie folgt verwendet (die vierte Zeile):

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'
 ];

Auf diese Weise können wir es in der Tabelle verwenden, um die Kontinuität der Paging-Seriennummern zu erreichen (bearbeitbar: {…} ist Zeilenbearbeitung, siehe meinen anderen Blog):

$("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();
   }
  });

Das Endergebnis ist dasselbe wie die Client-Paging-Sequenznummer.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS+Canvas zeichnet Kreisdiagramm

js implementiert die Zeichenbeschränkung für chinesische Zeichen = zwei Zeichen

Das obige ist der detaillierte Inhalt vonBootStrap+Tabellensortierungs-Paging-Sequenznummer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!