BootStrap+Table sorting paging sequence number

This time I will bring you BootStrap Table sorting and pagination serial number, what are the precautions for BootStrap Table sorting and pagination serial number, the following is a practical case, let's take a look.

Preface

• When using bootstrap table, you will inevitably use paging. Paging provides two methods: client paging and server paging.

• Client paging is generally not used in projects. Generally, the amount of table data is large, and using client paging will cause cache explosion, so we choose server paging.

• The existence is reasonable, and the client can also be used (when the amount of data is particularly small). Compared with the server mode, its paging sequence numbers are automatically consecutive. The serial numbers of server mode paging are not consecutive (each page starts from 1, not from the end serial number of the previous page). This article focuses on solving this problem.

Original paginated results

• Client paging, using the index index value in the formatter of the bootstrap table can make the serial number continuous

• Server paging, due to the lack of the current page position pageNumber and the size of each page pageSize, the index value cannot be determined. Using formatter to return the index is only the index of the current page.

Solution steps

What is the reason for this problem? Because the index parameter returned by the formatter we use, this parameter is the index of the table. All n total data of the client are on the client, and the index is 1-n, and the server paging each time The server only returns the data of the current page to the client, so the index is only 1-pageSize, and pageSize is the amount of data for one page, so this problem occurs.

In view of the problem that the server only returns one page of data, which causes the serial number to start from 1 every time the page is turned, we need to associate the page data of the server and the client, so we modify it based on the original formatter , let it pass this parameter and it will be ok.

First, let's look at the js source code of boostrap table, and we can see how some internal functions are written, such as:

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

So can we define a functional function ourselves? The answer is yes, we will also write a function that returns the index value we need. The definition is as follows:

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

The reason why we can write this function to pass the index parameter is that pageSize and pageNumber themselves are internal parameters of the bootstrap table, and they are all integrated in options, so if you have this parameter, I can write the function to return this value.

After writing a function, you must write this function into the internal function list, otherwise it will not be used. Insert getIndex like its original function as follows (the fourth line):

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

In this way, we can use it in the table. We use the getIndex method in the formatter to achieve the continuity of paging serial numbers (editable: {…} is row editing, please check my other 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();
   }
  });

The final result is the same as the client paging sequence number.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS canvas draws pie chart

js implements character limit Chinese characters = two characters

The above is the detailed content of BootStrap+Table sorting paging sequence number. For more information, please follow other related articles on the PHP Chinese website!