本文介绍如何修改 Bootstrap-Table 源码以扩展分页工具栏，增加跳转到指定页的功能。通过替换 HTML 结构、添加 CSS 样式及 JS 方法，实现页码输入与跳转。注意该方案仅支持单表格实例，多表格场景下可能无效。
Bootstrap-Table 扩展分页工具栏：实现跳转到指定页功能
在新项目中，计划使用 Bootstrap-Table 控件来展示页面表格。然而，该控件默认的分页工具栏缺少跳转到指定页的功能。为了满足公司内部美工提出的特定需求，不得不修改 Bootstrap-Table 的源码，从而实现了这一功能。
需要注意的是，由于作者的前端 JavaScript 技能有限，此扩展仅支持页面上的单个表格实例。如果同一页面中引用了两次 Bootstrap-Table，则该跳转功能将失效。
如果各位有更完善的解决方案，欢迎在评论区留言分享，以便互相学习。
关于如何引入控件等基础操作，网上已有大量优质教程，此处不再赘述。下面直接展示源码修改部分。
源码修改步骤
首先，下载 Bootstrap-Table 的源码（注意不要下载 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>');将上述代码替换为以下代码：
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>');至此，源码修改完成。
CSS 样式定义
接下来，在全局 CSS 文件中添加以下 class 定义：
.pageBtn {
}
.pageNum {
width: 40px;
border-radius: 3px;
}
.goPage {
float: right;
margin-left: 5px;
margin-top: 13px;
height: 30px;
}如果需要自定义按钮样式，可以在 pgeBtn 中自行定义。
JavaScript 跳转方法
最后，在 JS 文件中添加跳转方法：
function toPage() {
var pageNum = $("#pageNum").val();
if (pageNum) {
$('#table').bootstrapTable('selectPage', parseInt(pageNum));
}
}请注意，我的表格 ID 定义为 table，需要将 $('#table').bootstrapTable 替换为你自己定义的 ID。
完成以上步骤后，即可实现输入页码进行跳转的功能。效果图如下：
总结
以上所述是小编给大家介绍的 bootstrap-table.js 扩展分页工具栏（增加跳转到 xx 页）功能，希望对大家有所帮助。如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！