成都创新互联网站制作重庆分公司

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

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

创新互联主要从事做网站、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务新乡,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

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

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

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

1、下载bootstrap-table.js的源码(注意不要下载min的,我下载的版本是:version: 1.11.0),在源码中以 '

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

  html.push('
', '
', '
跳转到第
', '

到这,源码就修改完了。

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页)功能

总结

以上所述是小编给大家介绍的bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


文章标题:bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
分享网址:http://cxhlcq.com/article/jspoed.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部