时间:2021-05-28
新项目,准备引用bootstrap-table这个控件来展示页面上的表格,无奈这款控件的分页工具栏没有跳转到xx页的功能,为了适应公司美工(只会出图的美工,却跟我要求这要求那)的蛋疼需求,硬着头皮改了一下bootstrap-table的源码,实现了此功能。
注:由于本人js水平停留在dom级,此次扩展只支持页面上的单表格,也就是说如果同一个页面引用两次bootstrap-table的话,该跳转将无效。
各路神仙如果有更完美的解决方案,也请留言告诉我一声,让我也学习一下。
关于如何引用控件什么的就不说了,网上百度一下说的都比我好,下面直接上源码。
1、下载bootstrap-table.js的源码(注意不要下载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>');ok,把上面这段代码覆盖成下面的代码
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>');到这,源码就修改完了。
2、然后,在全局css文件里添加以下class
.pageBtn { }.pageNum { width: 40px; border-radius: 3px;}.goPage { float: right; margin-left: 5px; margin-top: 13px; height: 30px;}如果需要自定义按钮的样式,可以在pgeBtn里面自己定义
3、在js文件里添加跳转方法
function toPage() { var pageNum = $("#pageNum").val(); if (pageNum) { $('#table').bootstrapTable('selectPage', parseInt(pageNum)); }}注意,我的表格id定义为table,需要将$('#table').bootstrapTable换成你自己定义的id
以上,就可以实现输入页码进行跳转了。效果图如下:
总结
以上所述是小编给大家介绍的bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
因为项目用到Datatables发现在分页特别多时无法跳转到指定页,自己动手增加了#Datatables跳转到指定页#功能,实现代码如下:table=$('#u
bootstrap-table.js动态填充table单元格数据,总结了几种方法以适应各种需求,以下就简单介绍两种方法:方法一:全部自动填充table$('#t
先上图看效果,大家感觉还错请参考功能怎么实现的!从上图中不难看出,我们制定跳转到某页的功能是基于linkpager之上的扩展,这根我们之前实现的分页扩展明显不同
本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考,具体如下:使用bootstrap-table实现后台分页插件资源点击此处本站下载
ajax分页效果图如下:首先,先看HTML代码和CSS代码,我们需要一个table和一个footer:日期时间事件报警画面事件备注首页上一页下一页最后一页跳转到