bootstrap实现单页面跳转_bootstrap-table.js增加跳转到xx页功能实现方法
本文主要介绍了bootstrap-table.js扩展分页工具栏,增加跳转到xx页功能,由于小编的水平停留在dom级,此次扩展只支持页面上的表格,如果大家有好的建议欢迎提出,希望能帮助到大家。
新项目,准备引用bootstrap-table这个控件来展示页面上的表格,无奈这款控件的分页工具栏没有跳转到xx页的功能,为了适应公司美工(只会出图的美工,却跟我要求这要求那)的蛋疼需求,硬着头皮改了一下bootstrap-table的源码,实现了此功能。
注:由于本人js水平停留在dom级,此次扩展只支持页面上的单表格,也就是说如果同一个页面引用两次bootstrap-table的话,该跳转将无效。
各路神仙如果有更完美的解决方案,也请留言告诉我一声,让我也学习一下。
关于如何引用控件什么的就不说了,网上百度一下说的都比我好,下面直接上源码。
1、下载bootstrap-table.js的源码(注意不要下载min的,我下载的版本是:version: 1.11.0),在源码中以 '
- ',
'
- ',
'
' + this.options.paginationPreText + '');
ok,把上面这段代码覆盖成下面的代码html.push('
',
'
'
跳转到第页
',
'
',
'
- ',
'
' + this.options.paginationPreText + '');
到这,源码就修改完了。
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实现单页面跳转_bootstrap-table.js增加跳转到xx页功能实现方法相关推荐
- vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案 参考文章: (1)vue 单页面(SPA) hist ...
- Bootstrap实战 - 单页面网站
一.介绍 单页面结构简单.布局清晰,常常用来做手机 App 或者某个产品的下载介绍页面.现在,展示型网页整体趋向于单页网站设计,这样一次性把核心信息展现出来,对于用户来说更加直观和简单,能够快速了解一 ...
- bootstrap实现单页面跳转_SpringBoot拦截器,国际化,登录实现
首先将模板文件导入resources/templates,配置MyMvcConfig @Configurationpublic class MyMvcConfig implements WebMvcC ...
- cognito_将Amazon Cognito与单页面应用程序(Vue.js)集成
cognito 在本文中,我们将研究使用OAuth协议通过Amazon Cognito对单页应用程序(使用Vue.js构建)进行身份验证. 在上一篇文章中,我们将服务器端应用程序与Amazon Cog ...
- 将Amazon Cognito与单页面应用程序(Vue.js)集成
在本文中,我们将研究使用OAuth协议通过Amazon Cognito对单页应用程序(使用Vue.js构建)进行身份验证. 在上一篇文章中,我们将服务器端应用程序与Amazon Cognito集成在一 ...
- React单页面图片瀑布流——Macy.js
图片瀑布流 需求:一个数组里的图片按两列排列,图片尺寸不一样. 问题:如果只是简单的数组分成两个数组,有可能一组图片高度加起来远远高于另一组,视觉效果太差. 想了想简单的js实现逻辑: 1.一个图片数 ...
- html表项点击跳转,html table 点击跳转
一种可实时处理 O(1)复杂度图像去雾算法的实现. 在我博文的一系列的文章,有不少算法都于去雾有关,比如限制对比度自适应直方图均衡化算法原理.实现及效果.局部自适应自动色阶/对比度算法在图像增强上的应 ...
- 拦截Response.Redirect的跳转并转换为Js的跳转
有一个很常见的需求,某个页面需要用户登录才能访问,或者某个操作需要用户登录 这就需要检测用户登录,一般是使用Ajax去检测是否登录,当用户未登录时跳转到登录页面 那么问题来了···· 有的时候我们跳转 ...
- phpcms V9手机门户模块实现单页功能的方法
第一步:实现分类管理可以绑定单页的修改办法 需要修改的文件所在目录:\phpcms\modules\wap\templates ,目录下文件type_manage.tpl.php为手机门户分类管理的模 ...
最新文章
- php查询记录是否存在,php – 插入查询检查是否存在记录 – 如果不存在,插入它...
- php关系运算符语句,PHP基础__运算符和逻辑语句(三)
- Texmaker使用方法、Latex的优缺点
- 5分钟图解Hbase列式存储
- MySQL- 用Navicat通过隧道连接到远程数据库
- python的数据库_python数据库操作-mysql数据库
- Effective_STL 学习笔记(七) 当使用 new 得指针容器时,记得在销毁容器前 delete 那些指针...
- raft算法mysql主从复制_mysql主从复制原理
- python堆排序的库_Python:堆排序
- msp430单片机oled汉字字模_OLED液晶屏如何显示中文呢?
- 在python中无论类的名字是什么构造方法的名字都是_超星尔雅大学生职业素养期末答案...
- Windows 2003声卡驱动的安装.
- python读入图片,可视化展示图片
- 扎根黄金赛道,尚未盈利的捍宇医疗如何遨游行业蓝海?
- 画布渐变以及svg图形
- CSS3 背景图 插入 SVG 或图片 base64
- java与模式(一)
- MacOS下Git与GitHub
- R使用LASSO回归预测股票收益
- 梯度、Hessian矩阵、平面方程的法线以及函数导数的含义
热门文章
- css 浮动 解决,div+css浮动的解决方法
- css将div变为块,css+div 浮动分块
- 领英撤回邀请对方能看到吗及高效管理领英账号
- 论文研读笔记(五)——通过单机器人进化策略搜索增强多机器人导航的深度强化学习方法
- 高德机器人的名字是怎么呼叫的_高德代理主管自定义聊天机器人如何帮助您简化...
- 网络性能--速率,带宽,吞吐量
- 手机恢复出厂设置命令_华为手机怎么恢复出厂设置 华为恢复出厂设置的两种方法...
- C语言:删除有序链表大于mink小于maxk的数
- 教师计算机培训网站,教师计算机培训材料..pdf
- 微型计算机储存容量单位,计算机中存储容量的基本单位是( )。