bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
时间:2019-04-12
本文章向大家介绍bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能,主要包括bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
新项目,准备引用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页)功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LinkedBlockingQueue源码学习
- 三歪吐血总结了各个中间件是如何实现持久化的
- ThreadPoolExecutor源码学习
- Docker六脉神剑(四) 使用Docker-Compose进行服务编排搭建lnmp环境
- 干的想喝水,一篇文章带你读懂硬盘工作原理!
- 微信小程序开发实战(11):滚动组件(picker)
- Docker六脉神剑 (五) Docker Swarm集群搭建及基础服务部署
- 思科模拟器GNS3将路由器变成交换机的方法
- docker安装nginx并配置https
- Docker Swarm集群部署lnmp+redis
- Maven快速入门
- TomCat安装及快速部署
- SpringCloud+MyBatis分页处理(前后端分离)
- 手把手教你搭建SpringCloud项目
- SpringCloud的@Value注解及GitLab配置使用