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 相关文章推荐
分享几个超级震憾的图片特效
Jan 08 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
vue使用openlayers实现移动点动画
Sep 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
PHP7常量数组用法分析
2016/09/26 PHP
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
简述vue中的config配置
2018/01/23 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python抓取网页内容示例分享
2014/02/24 Python
解读Python中degrees()方法的使用
2015/05/18 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
女子职高个人自荐书
2014/02/01 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
2014年度工作总结报告
2014/12/15 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
企业投资意向书
2015/05/09 职场文书
导游词之阆中古城
2019/12/23 职场文书