当前位置:Gxlcms > JavaScript > bootstrap-table.js增加跳转到xx页功能实现方法

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

时间:2021-07-01 10:21:17 帮助过:24人阅读

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

【相关视频推荐:Bootstrap教程

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

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

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

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

1、下载bootstrap-table.js的源码(注意不要下载min的,我下载的版本是:version: 1.11.0),在源码中以 '<ul class="pagination' 为关键字进行检索,定位到以下代码

ok,把上面这段代码覆盖成下面的代码

到这,源码就修改完了。

2、然后,在全局css文件里添加以下class

如果需要自定义按钮的样式,可以在pgeBtn里面自己定义

3、在js文件里添加跳转方法

注意,我的表格id定义为table,需要将$('#table').bootstrapTable换成你自己定义的id

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

相关推荐:

关于ajax跳转到新的jsp页面的方法分享

如何用JS判断当前域名并跳转到指定页面

Servlet跳转到JSP页面后的路径问题相关解释

以上就是bootstrap-table.js增加跳转到xx页功能实现方法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行