Bootstrap-table自定义可编辑每页显示记录数


Posted in Javascript onSeptember 07, 2018

写在前面:

最近在做的person功能,由于后期系统中person人数较多,不利用查找person,故需求方将要求可以自己编辑每页显示的数目,而不是固定的写死每页显示的数目。

下面先来看下bootsrap-table自带的可切换每页显示记录数的图片

Bootstrap-table自定义可编辑每页显示记录数

其实我感觉自带的这个下拉框选择每页显示的记录数,已经很方便啦,只需要给几个值就可以了,但是为了更加人性化与方便,就要改的呢,初步想的是,直接将此处的下拉框改为一个input输入框就可以了。事实上,最后也是这么做的。

下面先大概说一下改造的思路吧。对于改造原有的html页面的显示,肯定是要利用浏览器的调试功能去查看此处的组件的组成;确定了原有的组件代码后,将原有的显示组件移除,拼接自己的html。

通过捕获可知,此处的html代码是一个大div,里面包含两个小div,一个为上图左边显示每页记录数的,另一个为右边显示多少页的。那么现在就是要将左边的div获取到,然后移除,并拼接自己的html.

原表格左边的html代码图:

Bootstrap-table自定义可编辑每页显示记录数

 从上图可以看到,可以通过class来获取到此div,故可以使用下面的代码,现将原来的div的内容移除,再append拼接自己的div内容

//自定义可编辑每页显示的记录数
    $("div[class='pull-left pagination-detail']").empty();

    $("div[class='pull-left pagination-detail']").append('<span>Total rows</span>  ');
    $("div[class='pull-left pagination-detail']").append('<span id="totalCount">'+data.total+'</span>;  ');
    $("div[class='pull-left pagination-detail']").append('<input id="pageSize" name="pageSize" value="'+temp+'" style="text-align:center;width:30px"/>  records per page');

注意,此段代码不是什么地方都可以放的,由于是在table被加载成功后,才去改变,故此代码可以放在onLoadSuccess方法里。

下面是改造后的图:

Bootstrap-table自定义可编辑每页显示记录数

 

现在页面显示达到想要的效果了,那么如何每次点击查询的时候,去获取到此值,并发送给后台呢?

通过查看bootstrap-table.js的源码可以大致得出,params.limit是经过this.options.pageSize计算得来的,右边的总页数也是经过this.options.pageSize计算得来的,那么现在的重点就是如何获取到pageSize属性,然后获取到后,只需要将输入框的值赋值给这个pageSize就可以了。

好在皇天不负有心人,经过一个多小时的折磨后,测试出来在jsp页面使用this.pageSize就可以获取到了。hhhh.......(虽然还不是很明白为什么,待会写完就去看看js中this的指向用法)。现在可以给pageSize赋值了,但是页面查询每次刷新后,input输入框也会被刷新还原,那怎么办?

这里我做了一个隐藏的标签,用于每次将此值保存,当再次刷新时,再从隐藏的标签中拿值然后赋值给此输入框,显示出来,(由于每次刷新table此输入框也会被刷新,故需要重新赋值)

做到这里也就差不多了,一些小细节可以根据自己的项目需求再去实现。下面,还是把主要的代码部门贴上来,以免之后忘记了。。

<div style="height:380px;overflow-y: auto;">
 <%--用于每次给输入框接收或传递值--%>
 <span hidden id="hiddenPageSize">15</span>
 <table id="table"></table>
 </div>

总结

以上所述是小编给大家介绍的Bootstrap-table自定义可编辑每页显示记录数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 #Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 #jQuery
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 #Javascript
Vue中使用sass实现换肤功能
Sep 07 #Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 #jQuery
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 #Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 #Javascript
You might like
PHP MSSQL 存储过程的方法
2008/12/24 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
php文件上传类的分享
2017/07/06 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
PHP实现计算器小功能
2020/08/28 PHP
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
python requests post多层字典的方法
2018/12/27 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
银行委托书范本
2014/04/04 职场文书
雷人标语集锦
2014/06/19 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
小学音乐课教学反思
2016/02/18 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技