BootStrap Table实现server分页序号连续显示功能（当前页从上一页的结束序号开始）

前言

• 在使用bootstrap table的时候难免会用到分页，分页它提供了两种方式：client客户端分页、server服务端分页两种方式。
• 在项目中一般是不用client分页的，一般表格数据量大，用client分页会导致缓存爆炸，所以我们选择server分页。
• 存在即合理，client也是可以用的（数据量特别少的时候），相对于server方式，它的分页序号是自动连续的。而server方式分页的序号就不连续的了（每一页都是从1开始，而不是从上一页的结束序号开始），本文就着重解决这个问题。

原始分页结果

• client分页，使用bootstrap table的formatter中的index索引值可以使得序号是连续的，上图：

这是第1页的序号，为1-4。

这是第2页的序号，为5-8。

• server分页，由于缺乏当前页的位置pageNumber和每页的大小pageSize,所以无法确定索引值，用formatter返回index就是只有当前页的索引。

这是server分页的第1页，序号为1-4。

这是server分页的第5页，序号也为1-4。

解决步骤

出现这个问题的原因是什么呢，由于我们使用的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分页的序号是一样的。

总结

以上所述是小编给大家介绍的BootStrap Table实现server分页序号连续显示功能（当前页从上一页的结束序号开始），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# bootstrap  # table  # 分页  # 序号  # bootstrap table分页模板和获取表中的ID方法  # Bootstrap table两种分页示例  # DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序  # 过滤  # 分页等）  # 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询  # BootStrap中Table分页插件使用详解  # 第一次动手实现bootstrap table分页效果  # Bootstrap Table服务器分页与在线编辑应用总结  # 万元  # 这是  # 客户端  # 服务端  # 每页  # 上一页  # 当前页  # 两种  # 这个问题  # 是从  # 第一页  # 小编  # 的是  # 行数  # 原值  # 加载  # 行间  # 都在  # 在此 

相关文章： 外贸公司网站制作,外贸网站建设一般有哪些步骤？  宝华建站服务条款解析：五站合一功能与SEO优化设置指南  如何在万网ECS上快速搭建专属网站？  如何快速搭建二级域名独立网站？  建站之星展会模板：智能建站与自助搭建高效解决方案  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  如何在阿里云通过域名搭建网站？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  制作电商网页,电商供应链怎么做？  如何通过商城自助建站源码实现零基础高效建站？  北京企业网站设计制作公司,北京铁路集团官方网站？  C#如何在一个XML文件中查找并替换文本内容  如何在景安云服务器上绑定域名并配置虚拟主机？  常州自助建站：操作简便模板丰富，企业个人快速搭建网站  北京网站制作的公司有哪些,北京白云观官方网站？  宁波自助建站系统如何快速打造专业企业网站？  c# F# 的 MailboxProcessor 和 C# 的 Actor 模型  如何用花生壳三步快速搭建专属网站？  保定网站制作方案定制,保定招聘的渠道有哪些？找工作的人一般都去哪里看招聘信息？  香港服务器租用每月最低只需15元？  如何获取上海专业网站定制建站电话？  如何获取PHP WAP自助建站系统源码？  PHP正则匹配日期和时间(时间戳转换)的实例代码  建站主机如何选？高性价比方案全解析  制作网站哪家好,cc、.co、.cm哪个域名更适合做网站？  如何通过可视化优化提升建站效果？  如何零基础在云服务器搭建WordPress站点？  实惠建站价格推荐：2025年高性价比自助建站套餐解析  制作网站的软件免费下载,免费制作app哪个平台好？  如何通过FTP空间快速搭建安全高效网站？  打鱼网站制作软件,波克捕鱼官方号怎么注册？  单页制作网站有哪些,朋友给我发了一个单页网站，我应该怎么修改才能把他变成自己的呢，请求高手指点迷津？  ,交易猫的商品怎么发布到网站上去？  如何在建站宝盒中设置产品搜索功能？  网站制作难吗安全吗,做一个网站需要多久时间？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  如何快速使用云服务器搭建个人网站？  建站之星安装路径如何正确选择及配置？  如何用5美元大硬盘VPS安全高效搭建个人网站？  如何快速搭建个人网站并优化SEO？  如何在宝塔面板创建新站点？  新网站制作渠道有哪些,跪求一个无线渠道比较强的小说网站，我要发表小说？  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  北京网站制作网页,网站升级改版需要多久？  如何在建站主机中优化服务器配置？  ,sp开头的版面叫什么？  网站制作公司排行榜,抖音怎样做个人官方网站  建站之星CMS建站配置指南：模板选择与SEO优化技巧  昆明高端网站制作公司,昆明公租房申请网上登录入口？  如何彻底删除建站之星生成的Banner？