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

注:由于本人js水平有限,此次扩展只支持页面上的单表格,也就是说如果同一个页面引用两次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)">' + 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)">' + 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页的更多相关文章

  1. bootstrap table 前后端分页(超级简单)

    前端分页:数据库查询所有的数据,在前端进行分页 后端分页:每次只查询当前页面加载所需要的那几条数据 下载bootstrap 下载bootstrap table jquery谁都有,不说了 项目结构:T ...

  2. BootStrap table服务端分页

    涉及到的内容: 1.bootstrap-table插件: 2.mybatisplus分页查询: 3.spring封装对象匹配bootstrap-table插件格式: 4.sql查询隐藏手机号中间四位. ...

  3. 关于bootstrap table的server分页

    首先是bootstrap初始化的表格参数: // 初始化Table oTableInit.Init = function() { $('#booksTable').bootstrapTable({ u ...

  4. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  5. [转]JS组件系列——表格组件神器:bootstrap table

    原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...

  6. JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  7. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  8. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  9. [转]Bootstrap table后端分页(ssm版)

    原文地址:https://www.cnblogs.com/flyins/p/6752285.html 说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分 ...

随机推荐

  1. <背包>solution-POJ1742_Coins

    POJ1742 - Coins People in Silverland use coins.They have coins of value A1,A2,A3...An Silverland dol ...

  2. 4、Oracle 数据库 startup 报错:ORA-27102: out of memory

    1.数据库启动报错: ORA-: out of memory SQL> startup pfile='/db/oracle/init.ora'; ORA-: out of memory Linu ...

  3. 85道Java微服务面试题整理(助力2020面试)

    微服务 面试题 1.您对微服务有何了解? 2.微服务架构有哪些优势? 3.微服务有哪些特点? 4.设计微服务的最佳实践是什么? 5.微服务架构如何运作? 6.微服务架构的优缺点是什么? 7.单片,SO ...

  4. 函数调用约定_stdcall[转]

    关键字 清理堆栈 参数入栈顺序 函数名称修饰(C) __cdecl 调用函数 右 à 左 _函数名 __stdcall 被调用函数 右 à 左 _函数名@数字 __fastcall 被调用函数 右 à ...

  5. LeetCode 547. Friend Circles 朋友圈(C++/Java)

    题目: https://leetcode.com/problems/friend-circles/ There are N students in a class. Some of them are ...

  6. Codeforces_821

    A.直接判断每一个数. #include<bits/stdc++.h> using namespace std; ][]; int main() { ios::sync_with_stdi ...

  7. 移动端H5优化

    H5前端优化收藏的网址: https://zhuanlan.zhihu.com/p/25176904 http://tgideas.qq.com/webplat/info/news_version3/ ...

  8. 2 深入分析 Java IO的工作机制(二)

    2.5 I/O调优 下面总结一些磁盘I/O和网络I/O的常用优化技巧. 2.5.1 磁盘I/O优化 1. 性能检测 应用程序通常都需要访问磁盘来读取数据,而磁盘I/O通常都很耗时,要判断I/O是否是一 ...

  9. 【JavaScript】进制转换&位运算,了解一下?

    前言 在一般的代码中很少会接触到进制和位运算,但这不代表我们可以不去学习它.作为一位编程人员,这些都是基础知识.如果你没有学过这方面的知识,也不要慌,接下来的知识并不会很难.本文你将会学习到: 进制转 ...

  10. 02_TypeScript数据类型

    typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,写ts代码必须指定类型.   1.布尔类型(boolean) var flag:boolean = true;   2.数字 ...