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


Posted in Javascript onSeptember 12, 2017

前言

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

原始分页结果

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

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

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

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

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

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

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

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

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

这是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分页序号连续显示功能(当前页从上一页的结束序号开始),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 小练习(实例代码)
Aug 07 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
BootStrap的两种模态框方式
May 10 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
Angular 4.0学习教程之架构详解
Sep 12 #Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 #jQuery
详解vue axios中文文档
Sep 12 #Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 #Javascript
vue-resouce设置请求头的三种方法
Sep 12 #Javascript
vue params、query传参使用详解
Sep 12 #Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 #Javascript
You might like
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
Python re模块介绍
2014/11/30 Python
python字典DICT类型合并详解
2017/08/17 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
python自动发送邮件脚本
2018/06/20 Python
Python global全局变量函数详解
2018/09/18 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
python yield关键词案例测试
2019/10/15 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
在python中使用nohup命令说明
2020/04/16 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
《愚公移山》教学反思
2014/02/20 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
会计求职信
2014/05/29 职场文书
团员个人年度总结
2015/02/26 职场文书
2015年度企业工作总结
2015/05/21 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
Redis特殊数据类型bitmap位图
2022/06/01 Redis