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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 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
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
在Python中操作字典之update()方法的使用
2015/05/22 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
python实现字典嵌套列表取值
2019/12/16 Python
Python中包的用法及安装
2020/02/11 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
就业推荐自我鉴定
2013/10/06 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
举起手来观后感
2015/06/09 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python