前言

• 在使用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服务器分页与在线编辑应用总结  # 万元  # 这是  # 客户端  # 服务端  # 每页  # 上一页  # 当前页  # 两种  # 这个问题  # 是从  # 第一页  # 小编  # 的是  # 行数  # 原值  # 加载  # 行间  # 都在  # 在此 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 历史网站制作软件,华为如何找回被删除的网站？  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  Java类加载基本过程详细介绍  如何用wdcp快速搭建高效网站？  VIVO手机上del键无效OnKeyListener不响应的原因及解决方法  Python文件流缓冲机制_IO性能解析【教程】  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）  Laravel如何创建和注册中间件_Laravel中间件编写与应用流程  如何快速生成凡客建站的专业级图册？  网站建设要注意的标准 促进网站用户好感度！  Python进程池调度策略_任务分发说明【指导】  黑客入侵网站服务器的常见手法有哪些？  如何在阿里云完成域名注册与建站？  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程  微信小程序 配置文件详细介绍  高端云建站费用究竟需要多少预算？  免费视频制作网站,更新又快又好的免费电影网站？  如何用美橙互联一键搭建多站合一网站？  SQL查询语句优化的实用方法总结  今日头条AI怎样推荐抢票工具_今日头条AI抢票工具推荐算法与筛选【技巧】  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程  Java遍历集合的三种方式  详解Android中Activity的四大启动模式实验简述  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  如何快速建站并高效导出源代码？  php打包exe后无法访问网络共享_共享权限设置方法【教程】  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  Laravel如何集成Inertia.js与Vue/React？（安装配置）  香港服务器选型指南：免备案配置与高效建站方案解析  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  Java Adapter 适配器模式（类适配器，对象适配器）优缺点对比  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  Laravel如何实现用户密码重置功能？（完整流程代码）  如何在建站宝盒中设置产品搜索功能？  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  Laravel如何正确地在控制器和模型之间分配逻辑_Laravel代码职责分离与架构建议  高端智能建站公司优选：品牌定制与SEO优化一站式服务  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  Linux系统命令中screen命令详解  浅述节点的创建及常见功能的实现  免费网站制作appp,免费制作app哪个平台好？  JavaScript常见的五种数组去重的方式  Internet Explorer官网直接进入 IE浏览器在线体验版网址  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？  jquery插件bootstrapValidator表单验证详解