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的事件描述
Sep 08 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
javascript 常用功能总结
Mar 18 Javascript
js异常捕获方法介绍
Apr 10 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
canvas实现图像截取功能
Feb 06 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
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实现加密的几种方式介绍
2015/02/22 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
PHP调用其他文件中的类
2018/04/02 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
Python 操作文件的基本方法总结
2017/08/10 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Python高级property属性用法实例分析
2019/11/19 Python
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
函授自我鉴定
2013/11/06 职场文书
安全生产承诺书
2014/03/26 职场文书
临床医师个人自我评价
2014/04/06 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
结婚仪式主持词
2015/06/29 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript