bootstrap table排序php,BootStrap+Table排序分页序号
这次给大家带来BootStrap+Table排序分页序号,BootStrap+Table排序分页序号的注意事项有哪些,下面就是实战案例,一起来看一下。
前言在使用bootstrap table的时候难免会用到分页,分页它提供了两种方式:client客户端分页、server服务端分页两种方式。
在项目中一般是不用client分页的,一般表格数据量大,用client分页会导致缓存爆炸,所以我们选择server分页。
存在即合理,client也是可以用的(数据量特别少的时候),相对于server方式,它的分页序号是自动连续的。而server方式分页的序号就不连续的了(每一页都是从1开始,而不是从上一页的结束序号开始),本文就着重解决这个问题。
原始分页结果client分页,使用bootstrap table的formatter中的index索引值可以使得序号是连续的
server分页,由于缺乏当前页的位置pageNumber和每页的大小pageSize,所以无法确定索引值,用formatter返回index就是只有当前页的索引。
解决步骤
出现这个问题的原因是什么呢,由于我们使用的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分页的序号是一样的。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
bootstrap table排序php,BootStrap+Table排序分页序号相关推荐
- html怎么自动导入数据并排序,JS实现table表格数据排序功能(可支持动态数据+分页效果)...
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需 ...
- React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...
- Bootstrap table方法,Bootstrap table事件,配置
调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...
- jquery 鼠标拖动排序Li或Table
1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...
- sortable vue 排序_VUE +element el-table运用sortable 拖拽table排序,实现行排序,列排序...
sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable sortable ...
- bootstrap 栅格系统实现类似table跨行
2019独角兽企业重金招聘Python工程师标准>>> 通过bootstrap 栅格系统实现类似table跨行 的效果,如下: 具体代码如下: <div class=" ...
- element-ui表格sort-change排序,当table部分数据为空null时,解决排序不起作用/错乱/不整齐的问题(支持字符串,数字排序)
当表格排序列的数据出现空数据(null)的时候,组件自带的排序功能就不正常了,出现的问题如图: 排序生效,但不整齐,中间有空行. 思路一:重新排一个新数组:遍历表格data,使其含空的数据堆在一块,非 ...
- oracle在指定列后添加列,ORACLE中文排序及在table中指定位置增加字段
ORACLE中文排序方式 Oracle9i之前,中文是按照二进制编码进行排序的. 在oracle9i中新增了按照拼音.部首.笔画排序功能.设置NLS_SORT值 SCHINESE_RADICAL_M ...
- layui table 分页 序号始终从”1“开始解决方法
layui table 分页 序号始终从"1"开始解决方法 参考文章: (1)layui table 分页 序号始终从"1"开始解决方法 (2)https:// ...
最新文章
- 让浏览器不记住表单元素输入过的内容
- 【IDAX投研中心】BCH果然最强
- XCode Could not launch quot;quot; failed to get the task for process
- 信息论4—多符号离散信道,单维连续信道
- GPU迎来投资热潮 退潮后谁在裸泳
- c语言sort函数_C语言经典面试题目及答案详解(二)
- BZOJ 3083: 遥远的国度(树链剖分+DFS序)
- 问答| 为什么四轮驱动机器人(SSMR)的质心(COM)没有横向分速度vy呢?
- 图像特征计算与表示——基于内容的图像检索
- Spring pom配置详解(转)
- ACWING830 单调栈
- centos mysql 主从安装_基于 CentOS Mysql 安装与主从同步配置详解
- 软件项目管理总结(全)
- 电脑图标变成白纸如何恢复
- 格力董明珠和小米雷军的10亿赌局 --- 当年的理念谁赢谁输
- 员工股权激励方案设计
- DRM破解再升级 支持新版WM11
- python招聘杭州拉勾网_Python3获取拉勾网招聘信息
- 使用html2canvas保存html或者div内容为图片及自定义名称
- 排序算法整理(冒泡、选择、快排、堆排序、希尔、归并)
热门文章
- java excel导出复杂表头_java excel复杂表头和复杂数据导出
- 极简大纲笔记 | 一键生成思维导图 mubu
- 抖音短视频、西瓜视频、快手等短视频app为什么这么火
- Android工具类库,满足你的各种需求
- Spring事务传播特性与事物隔离级别
- 计算机桌面来回闪烁,电脑屏幕一直闪烁怎么办_电脑屏幕一直闪烁的解决方法 - 系统家园...
- android 定时刷新获取天气信息,android中获取即时天气
- 普联发送系统日志 服务器地址,如何通过 tp-link无线路由器系统日志查看连接过的终端的MAC地址.pdf...
- 刚从阿里、头条面试回来,聊一聊MySQL数据库中的那些锁
- 三级文明的代码_文明6作弊码介绍 文明6作弊代码秘籍一览