新项目,准备引用bootstrap-table这个控件来展示页面上的表格,无奈这款控件的分页工具栏没有跳转到xx页的功能,为了适应公司美工(只会出图的美工,却跟我要求这要求那)的蛋疼需求,硬着头皮改了一下bootstrap-table的源码,实现了此功能。
注:由于本人js水平停留在dom级,此次扩展只支持页面上的单表格,也就是说如果同一个页面引用两次bootstrap-table的话,该跳转将无效。
各路神仙如果有更完美的解决方案,也请留言告诉我一声,让我也学习一下。
关于如何引用控件什么的就不说了,网上百度一下说的都比我好,下面直接上源码。
1,下载bootstrap-table。js的源码(注意不要下载敏的,我下载的版本是:版本:1.11.0),在源码中以“& lt; ul类=胺忠场蔽丶纸屑焖?定位到以下代码,,,,,,
html.push (' & lt;/div> ',
“& lt; div=袄? ' + this.options类。paginationHAlign +“分页”的,
& lt; ul类=狈忠? + sprintf(分页- % s, this.options.iconSize) +”“在”,
李的& lt;类=" page-pre "祝辞& lt; a href=" javascript:无效(0)”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在“+ this.options。paginationPreText + ' & lt;/a> & lt;/li>”);
好的,把上面这段代码覆盖成下面的代码,,,,,,,
html.push (' & lt;/div> ',
& lt; div类=" goPage "祝辞& lt;输入类型=鞍磁ァ奔壑?" https://www.yisu.com/zixun/跳转”类=皃ageBtn祝辞& lt;/div>”,
' & lt; div类=癵oPage”在跳转到第& lt;输入id=皃ageNum”类=皃ageNum”类型=拔谋尽钡脑谝? lt;/div>”,
“& lt; div=袄? ' + this.options类。paginationHAlign +“分页”的,
& lt; ul类=狈忠? + sprintf(分页- % s, this.options.iconSize) +”“在”,
李的& lt;类=" page-pre "祝辞& lt; a href=" javascript:无效(0)”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在“+ this.options。paginationPreText + ' & lt;/a> & lt;/li>”);
到这,源码就修改完了。
2,然后,在全局css文件里添加以下类
.pageBtn {
}
.pageNum {
宽度:40像素;
border - radius: 3 px;
}
.goPage {
浮:正确;
margin-left: 5 px;
margin-top: 13 px;
高度:30 px;
}
如果需要自定义按钮的样式,可以在pgeBtn里面自己定义
3,在js文件里添加跳转方法
函数toPage () {
var pageNum=$ (" # pageNum”) .val ();
如果(pageNum) {
$(" #表”)。bootstrapTable (“selectPage”方法(pageNum));
}
}
注意,我的表格id定义为表,需要将<代码> $(“#表”).bootstrapTable>
以上,就可以实现输入页码进行跳转了。效果图如下:
以上所述是小编给大家介绍的bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
