bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能


Posted in Javascript onDecember 28, 2017

新项目,准备引用bootstrap-table这个控件来展示页面上的表格,无奈这款控件的分页工具栏没有跳转到xx页的功能,为了适应公司美工(只会出图的美工,却跟我要求这要求那)的蛋疼需求,硬着头皮改了一下bootstrap-table的源码,实现了此功能。

注:由于本人js水平停留在dom级,此次扩展只支持页面上的单表格,也就是说如果同一个页面引用两次bootstrap-table的话,该跳转将无效。

各路神仙如果有更完美的解决方案,也请留言告诉我一声,让我也学习一下。

关于如何引用控件什么的就不说了,网上百度一下说的都比我好,下面直接上源码。

1、下载bootstrap-table.js的源码(注意不要下载min的,我下载的版本是:version: 1.11.0),在源码中以 '<ul class="pagination' 为关键字进行检索,定位到以下代码      

html.push('</div>',
         '<div class="pull-' + this.options.paginationHAlign + ' pagination">',
         '<ul class="pagination' + sprintf(' pagination-%s', this.options.iconSize) + '">',
         '<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >' + this.options.paginationPreText + '</a></li>');

ok,把上面这段代码覆盖成下面的代码       

html.push('</div>',
        '<div class="goPage"><input type="button" value="跳转" class="pageBtn" onclick="toPage();"></div>',
        '<div class="goPage">跳转到第<input id="pageNum" class="pageNum" type="text">页</div>',
        '<div class="pull-' + this.options.paginationHAlign + ' pagination">',
        '<ul class="pagination' + sprintf(' pagination-%s', this.options.iconSize) + '">',
        '<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >' + this.options.paginationPreText + '</a></li>');

到这,源码就修改完了。

2、然后,在全局css文件里添加以下class

.pageBtn {
  
}
.pageNum {
  width: 40px;
  border-radius: 3px;
}
.goPage {
  float: right;
  margin-left: 5px;
  margin-top: 13px;
  height: 30px;
}

如果需要自定义按钮的样式,可以在pgeBtn里面自己定义

3、在js文件里添加跳转方法

function toPage() {
  var pageNum = $("#pageNum").val();
  if (pageNum) {
    $('#table').bootstrapTable('selectPage', parseInt(pageNum));
  }
}

注意,我的表格id定义为table,需要将$('#table').bootstrapTable换成你自己定义的id

以上,就可以实现输入页码进行跳转了。效果图如下:

bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能

总结

以上所述是小编给大家介绍的bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js打印纸函数代码(递归)
Jun 18 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
js自定义事件代码说明
Jan 31 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
VUE脚手架具体使用方法
May 20 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
javascript实现计算器功能
Mar 30 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 #Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 #Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 #Javascript
Angular实现的简单定时器功能示例
Dec 28 #Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 #Javascript
vue+swiper实现侧滑菜单效果
Dec 28 #Javascript
swiper插件自定义切换箭头按钮
Dec 28 #Javascript
You might like
PHP Google的translate API代码
2008/12/10 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
Yii清理缓存的方法
2016/01/06 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
分析python切片原理和方法
2017/12/19 Python
详解python分布式进程
2018/10/08 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
七匹狼男装广告词
2014/03/21 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
三严三实心得体会范文
2014/10/13 职场文书
迟到检讨书范文
2015/01/27 职场文书
护士实习自荐信
2015/03/06 职场文书
实习指导老师意见
2015/06/04 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
银行工作心得体会范文
2016/01/23 职场文书
openstack云计算keystone组件工作介绍
2022/04/20 Servers