bootstrap实现单页面跳转_bootstrap-table.js增加跳转到xx页功能实现方法

本文主要介绍了bootstrap-table.js扩展分页工具栏，增加跳转到xx页功能，由于小编的水平停留在dom级，此次扩展只支持页面上的表格，如果大家有好的建议欢迎提出，希望能帮助到大家。

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

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

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

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

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

• ',

'

• ',

'

' + this.options.paginationPreText + '');

ok，把上面这段代码覆盖成下面的代码html.push('

',

'

'

跳转到第页

',

'

',

'

• ',

'

' + this.options.paginationPreText + '');

到这，源码就修改完了。

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

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

相关推荐：