bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
作者:floud 时间:2024-04-29 13:12:45
新项目,准备引用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页)功能网站的支持!
来源:https://www.cnblogs.com/floud/archive/2017/12/28/8135605.html
标签:bootstrap,table.js,分页
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
vue实现选择商品规格功能
2024-05-13 09:37:55
![](https://img.aspxhome.com/file/2023/4/125304_0s.jpg)
数据库Sql实现截取时间段和日期实例(SQL时间截取)
2024-01-27 01:38:29
![](https://img.aspxhome.com/file/2023/9/110319_0s.png)
CSS expression在IE8里正式退出历史舞台
2008-10-26 16:57:00
Python 3.6 读取并操作文件内容的实例
2021-11-21 16:52:14
Python安装官方whl包和tar.gz包的方法(推荐)
2022-04-27 05:37:47
深入理解Django的自定义过滤器
2021-01-25 04:01:54
![](https://img.aspxhome.com/file/2023/1/71421_0s.jpg)
Python命名空间与作用域深入全面详解
2022-03-07 08:36:10
![](https://img.aspxhome.com/file/2023/1/115491_0s.jpg)
nestjs实现图形校验和单点登录的示例代码
2024-04-16 09:49:08
![](https://img.aspxhome.com/file/2023/8/136548_0s.gif)
Python 实现自动完成A4标签排版打印功能
2021-07-14 22:55:15
python神经网络Keras实现LSTM及其参数量详解
2023-02-09 14:02:22
![](https://img.aspxhome.com/file/2023/1/70701_0s.jpg)
使用python爬虫获取黄金价格的核心代码
2023-11-03 22:55:28
![](https://img.aspxhome.com/file/2023/3/120303_0s.jpg)
Python7个爬虫小案例详解(附源码)下篇
2023-11-23 03:47:38
![](https://img.aspxhome.com/file/2023/7/86647_0s.png)
django写单元测试的方法
2021-02-04 19:17:28
![](https://img.aspxhome.com/file/2023/4/110414_0s.png)
Vue.js实战之使用Vuex + axios发送请求详解
2023-07-02 17:03:48
Mysql全文搜索match against的用法
2024-01-19 16:30:57
Access数据库用另一种方式管理密码
2008-10-13 12:25:00
MySQL的远程连接出现错误提示分析
2011-07-01 11:34:00
Django数据统计功能count()的使用
2022-12-21 23:49:29
![](https://img.aspxhome.com/file/2023/5/115405_0s.png)
浅谈PHP的数据库接口和技术
2024-05-02 17:13:49
CSS入门了解CSS的伪类
2007-10-24 19:36:00