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

对于新项目，我打算引用bootstrap-table作为控件来显示页面上的表，但是这个控件的分页工具栏没有跳转到xx页的功能。为了满足公司艺人(只能画图，却向我要这个要那个的艺人)的蛋疼需求，我用一点头皮修改了bootstrap-table的源代码，实现了这个功能。

注意：由于我的js级别停留在dom级别，这个扩展只支持页面上的单个表，也就是说，如果引导表在同一个页面上被引用两次，跳转将无效。

如果有更完美的解决方案，请留言让我知道，以便我学习。

我不会谈论如何引用控件。网上百度比我好。以下是直接源代码。

1.下载bootstrap-table.js的源代码(注意不要下载min的，我下载的版本是：version: 1.11.0)，用关键字' ul class='pagination '搜索源代码，找到以下代码

html.push('/div '，' div class=' pull-' this . options . pagination halign ' pagination ' '，' ul class=' pagination ' sprint f(' pagination-% s '，this.options.iconSize)'，' Li class=' page-pre ' a href=' JavaScript : void(0)' rel=' external no follow ' rel=' external no follow ' ' this . options . pagination toplity '/a/Li ')；好，用下面的代码覆盖上面的代码

Html.push ('/div '，' div class=' gopage '输入类型=' button '值=' jump ' class=' page Btn ' onclick=' toPage()；/div '，' div class='goPage '跳转到第一个输入id=' page num ' class=' page num ' type=' text ' page/div '，' div class=' pull-' this . options . pagination halign ' paging ' '，' ul class=' paging ' sprint f(' paging-% s '，this.options.iconSize)'，' Li class=' page-pre ' a href=' JavaScript : void(0)' rel=' external no follow ' rel=' external no follow ' ' this选项。至此，源代码已经修改完毕。

2.然后，在全局css文件中添加以下类。pageBtn { }。pageNum { width: 40pxborder-radius : 3px；}.goPage { float: right左边距left: 5px保证金-top : 13px；height: 30px}如果需要自定义按钮的样式，可以在pgeBtn中自己定义

3.在js文件中添加一个跳转方法

函数toPage(){ var page num=$(' # page num ')。val()；if (pageNum) { $('#table ')。bootstrapTable('selectPage '，parsent(page num))；}}请注意，我的表id被定义为table，您需要替换$('#table ')。使用您自己的id启动

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

摘要

以上是边肖介绍的bootstrap-table.js扩展分页工具栏(增加跳转到xx页)的功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！