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

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

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

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

1、下载bootstrap-table.js的源码（注意不要下载min的，我下载的版本是：version: 1.11.0），在源码中以 '

代码@H_301_1@
','
' + this.options.paginationPreText + '');
ok，把上面这段代码覆盖成下面的代码@H_301_1@
','
跳转" class="pageBtn" onclick="toPage();">
','
跳转到第','
' + this.options.paginationPreText + '
');
到这，源码就修改完了。@H_301_1@
2、然后，在全局css文件里添加以下class@H_301_1@
}
.pageNum {
width: 40px;
border-radius: 3px;
}
.goPage {
float: right;
margin-left: 5px;
margin-top: 13px;
height: 30px;
}
如果需要自定义按钮的样式，可以在pgeBtn里面自己定义@H_301_1@
3、在js文件里添加跳转方法@H_301_1@
注意，我的表格id定义为table，需要将$('#table').bootstrapTable换成你自己定义的id@H_301_1@
以上，就可以实现输入页码进行跳转了。效果图如下：@H_301_1@
@H_301_1@@H_301_1@
总结
@H_301_1@
以上所述是小编给大家介绍的bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。@H_301_1@
bootstrapbootstraptable.js分页分页分页
• 上一篇：Bootstrap 模态框多次显示后台提交下一篇：详解为Bootstrap Modal添加拖拽的方