DDR爱好者之家

bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
站长资源 2024/11/26 佚名
43 1538
DDR爱好者之家 Design By 杰米

新项目，准备引用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页)功能

总结

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米