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与css打造个性化的单选框和复选框
Oct 20 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 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
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
如何使用php实现评委评分器
2015/07/31 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
python基础教程之序列详解
2014/08/29 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Django框架模板的使用方法示例
2019/05/25 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
高中教师个人工作总结
2015/02/10 职场文书
大学生十八大感想
2015/08/11 职场文书
外出学习心得体会范文
2016/01/18 职场文书
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技