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


Posted in Javascript onDecember 28, 2017

新项目,准备引用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页)功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js GridView 实现自动计算操作代码
Mar 25 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 #Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 #Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 #Javascript
Angular实现的简单定时器功能示例
Dec 28 #Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 #Javascript
vue+swiper实现侧滑菜单效果
Dec 28 #Javascript
swiper插件自定义切换箭头按钮
Dec 28 #Javascript
You might like
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php实现telnet功能示例
2014/04/08 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
使用Python抓取模板之家的CSS模板
2015/03/16 Python
python实现批量改文件名称的方法
2015/05/25 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
介绍Java的内部类
2012/10/27 面试题
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
怎样写好自我鉴定
2013/12/04 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
大学新生欢迎词
2014/01/10 职场文书
创文明城市标语
2014/06/16 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
2014年材料员工作总结
2014/11/19 职场文书
杜甫草堂导游词
2015/02/03 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android