登录  /  注册
首页 > web前端 > js教程 > 正文

有关使用bootstrap-table.js实现扩展分页工具栏功能

亚连
发布: 2018-06-14 16:33:56
原创
1525人浏览过

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

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

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

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

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

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

      html.push(&#39;</p>&#39;,
             &#39;<p class="pull-&#39; + this.options.paginationHAlign + &#39; pagination">&#39;,
             &#39;<ul class="pagination&#39; + sprintf(&#39; pagination-%s&#39;, this.options.iconSize) + &#39;">&#39;,
             &#39;<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >&#39; + this.options.paginationPreText + &#39;</a></li>&#39;);
    登录后复制

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

  html.push(&#39;</p>&#39;,
        &#39;<p class="goPage"><input type="button" value="跳转" class="pageBtn" onclick="toPage();"></p>&#39;,
        &#39;<p class="goPage">跳转到第<input id="pageNum" class="pageNum" type="text">页</p>&#39;,
        &#39;<p class="pull-&#39; + this.options.paginationHAlign + &#39; pagination">&#39;,
        &#39;<ul class="pagination&#39; + sprintf(&#39; pagination-%s&#39;, this.options.iconSize) + &#39;">&#39;,
        &#39;<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >&#39; + this.options.paginationPreText + &#39;</a></li>&#39;);
登录后复制

到这,源码就修改完了。

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) {
    $(&#39;#table&#39;).bootstrapTable(&#39;selectPage&#39;, parseInt(pageNum));
  }
}
登录后复制
<p>注意,我的表格id定义为table,需要将<code>$('#table').bootstrapTable</code>换成你自己定义的id</p><p>以上,就可以实现输入页码进行跳转了。效果图如下:</p><p style=" text-align: center>

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在javascript中如何获取图片的top N主色值

在D3.js中如何创建物流地图(详细教程)

有关ejsExcel模板使用方法

以上就是有关使用bootstrap-table.js实现扩展分页工具栏功能的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号