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中正则表达式的全局匹配模式分析
Apr 26 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
node.js require() 源码解读
Dec 13 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
php 无极分类(递归)实现代码
2010/01/05 PHP
php开启openssl的方法
2014/05/15 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
js控制input输入字符解析
2013/12/27 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
vue按需加载实例详解
2019/09/06 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python中的startswith和endswith函数使用实例
2014/08/25 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
java字符串格式化输出实例讲解
2021/01/06 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
人力资源主管岗位职责
2014/01/29 职场文书
股指期货心得体会
2014/09/13 职场文书
2015年手术室工作总结
2015/05/11 职场文书
教师节座谈会主持词
2015/07/03 职场文书
小学英语听课心得体会
2016/01/14 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android