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 相关文章推荐
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
vue实现lodop打印功能的示例
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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
深入了解php4(1)--回到未来
2006/10/09 PHP
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
Javascript模板技术
2007/04/27 Javascript
javascript之ESC(第二类混淆)
2007/05/06 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JavaScript 数组详解
2013/10/10 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
总结Python编程中函数的使用要点
2016/03/20 Python
Python3中exp()函数用法分析
2019/02/19 Python
python安装requests库的实例代码
2019/06/25 Python
深入了解Django View(视图系统)
2019/07/23 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
详解python logging日志传输
2020/07/01 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
Python Selenium库的基本使用教程
2021/01/04 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
2013年高中生自我评价
2013/10/23 职场文书
电子信息专业学生自荐信
2013/11/09 职场文书
高中综合实践活动总结
2014/07/07 职场文书
争先创优公开承诺书
2014/08/30 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书