bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
新项目,准备引用bootstrap-table这个控件来展示页面上的表格,无奈这款控件的分页工具栏没有跳转到xx页的功能,为了适应公司美工(只会出图的美工,却跟我要求这要求那)的蛋疼需求,硬着头皮改了一下bootstrap-table的源码,实现了此功能。 注:由于本人js水平停留在dom级,此次扩展只支持页面上的单表格,也就是说如果同一个页面引用两次bootstrap-table的话,该跳转将无效。 各路神仙如果有更完美的解决方案,也请留言告诉我一声,让我也学习一下。 关于如何引用控件什么的就不说了,网上百度一下说的都比我好,下面直接上源码。 1、下载bootstrap-table.js的源码(注意不要下载min的,我下载的版本是:version: 1.11.0),在源码中以 '
ok,把上面这段代码覆盖成下面的代码 ',' ',' ','
到这,源码就修改完了。 2、然后,在全局css文件里添加以下class }
.pageNum { width: 40px; border-radius: 3px; } .goPage { float: right; margin-left: 5px; margin-top: 13px; height: 30px; } 如果需要自定义按钮的样式,可以在pgeBtn里面自己定义 3、在js文件里添加跳转方法 注意,我的表格id定义为table,需要将 以上,就可以实现输入页码进行跳转了。效果图如下: 总结以上所述是小编给大家介绍的bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |