jquery datatables 添加跳转到指定页功能
项目中使用了jquery datatables 作为我们的数据表格组件,但是分页上没有跳转到指定页,需要自己重新写。解决方法如下:
在设置dataTables的默认属性里设置它的drawCallback方法来在后面拼接跳转元素,本方法是datatables 1.10往后的版本
本代码是针对spring mybatis pageHelper插件返回的PageInfo来进行处理的,返回的结构是{success:true, data : pageInfo},如果只是看自定义跳转,只需要看里面的drawCallback方法
/**
* 设置jquery datatables的默认属性
*/
function set_default_dataTables() {
var language = {// 汉化
"processing": "处理中...",
"lengthMenu": "显示 _MENU_ 条结果",
"zeroRecords": "没有匹配结果",
"info": "显示第 _START_ 至 _END_ 条结果,共 _TOTAL_ 条",
"infoEmpty": "显示第 0 至 0 条结果,共 0 条",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"infoPostFix": "",
"search": "搜索:",
"url": "",
"emptyTable": "表中数据为空",
"loadingRecords": "载入中...",
"thousands": ",",
"paginate": {
"first": "首页",
"previous": "上一页",
"next": "下一页",
"last": "末页"
}
};
$.extend($.fn.dataTable.defaults, {
searching: false,
ordering: false,
language: language,
lengthChange: false,
lengthMenu: [5, 10, 15, 20, 50],
pageLength: 15,
serverSide: true,
pagingType: "full_numbers",
ajax: {
data: function (param) {
init_dataTables_defaultParam(param);
},
dataSrc: function (result) {
if (result.success) {
var pageInfo = result.data;
result.recordsTotal = pageInfo.total;
result.recordsFiltered = pageInfo.total;
tableRowCount = pageInfo.list.length;
return pageInfo.list;
} else {
result.recordsTotal = 0;
result.recordsFiltered = 0;
return [];
}
}
},
drawCallback: function (setting) {
var _this = $(this);
var tableId = _this.attr('id');
var pageDiv = $('#' + tableId + '_paginate');
pageDiv.append(
'跳转到<input id="' + tableId + '_gotoPage" type="text" style="height:28px;line-height:28px;width:40px;"/>' +
'<a class="paginate_button" aria-controls="' + tableId + '" tabindex="0" id="' + tableId + '_goto">确定</a>')
$('#' + tableId + '_goto').click(function (obj) {
var page = $('#' + tableId + '_gotoPage').val();
var thisDataTable = $('#' + tableId).DataTable();
var pageInfo = thisDataTable.page.info();
if (isNaN(page)) {
$('#' + tableId + '_gotoPage').val('');
return;
} else {
var maxPage = pageInfo.pages;
var page = Number(page) - 1;
if (page < 0) {
page = 0;
} else if (page >= maxPage) {
page = maxPage - 1;
}
$('#' + tableId + '_gotoPage').val(page + 1);
thisDataTable.page(page).draw('page');
}
})
}
});
}
/**
* 移除 dataTables默认参数,并设置分页值
* @param param
*/
function init_dataTables_defaultParam(param) {
for (var key in param) {
if (key.indexOf("columns") == 0 || key.indexOf("order") == 0 || key.indexOf("search") == 0) { //以columns开头的参数删除
delete param[key];
}
}
param.pageSize = param.length;
param.pageNum = (param.start / param.length) + 1;
}
jquery datatables 添加跳转到指定页功能的更多相关文章
- Datatables跳转到指定页
因为项目用到Datatables发现在分页特别多时无法跳转到指定页,自己动手增加了#Datatables 跳转到指定页#功能,实现代码如下: table = $('#user-table').data ...
- 从手机浏览器或者 APP 中跳转到微信并跳转到指定页原理及行业内幕详解
相信很多朋友遇到过有些网站,可以直接通过一个连接就能让你的手机打开微信且跳转到某个指定的页面,许多程序员很好奇到底是怎么实现的,到处求这种方法的源码,在文本中我会介绍及剖析这种跳转实现的原理. 微信是 ...
- 利用.Net自带的票据完成BaseController的未登陆自动跳转到登陆页功能
一:定义票据中要记录的字段类 /// <summary> /// 用户存在于浏览器端的身份票据(非持久) /// 非持久 FormsAuthenticationTicket 的isPers ...
- jquery.pagination.js添加跳转页
原作者github地址:https://github.com/gbirke/jquery_pagination 在这基础上加入了跳转到指定页. 修改后的jquery.pagination.js /** ...
- jQuery DataTables 使用手册(精简版)
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/5182940.html 前排提醒,这个插件能不用就不用,那么多好的插件等着你,为什么要用它呢?就算用easyui的 ...
- 【前端】jQuery DataTables 使用手册(精简版)
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/5182940.html 前排提醒,这个插件能不用就不用,那么多好的插件等着你,为什么要用它呢?就算用easyui的 ...
- ASP-----分页功能的实现
WEB 分页功能的实现后端C#代码部分: // 建立Linq 数据库的连接 private MYDateDataContext context = new MYDateDataContext(); / ...
- [转] JQuery UI Tabs 动态添加页签,并跳转到新页签
[From] https://blog.csdn.net/zhangfeng2124/article/details/76672403 需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添 ...
- jQuery DataTables插件分页允许输入页码跳转
背景说明 项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...
随机推荐
- 从《乱世王者》看腾讯SLG手游如何搭建完整安全服务
WeTest 导读 <乱世王者>是由腾讯旗下天美工作室群自主研发的一款战争策略手游,在经历了2015年-2017年的SLG品类手游的爆发之势下,于2017年11月21日正式公测. < ...
- 常见的浏览器端的存储技术:cookie
工作原理: cookie是存在用户硬盘中,用户每次访问站点时,Web应用程序都可以读取Cookie包含的信息.当用户再次访问这个站点时,浏览器就会在本地硬盘上查找与该 URL 相关联的 Cookie. ...
- 腾讯x5webview集成实战
应用中许多网页由于优化的不够理想,出现加载慢,加载时间长等,而且因为碎片化导致兼容性问题,有一些网页有视频内容,产品还提出各种小窗需求,搞得心力憔悴.找到公开的有crosswalk和x5webview ...
- vue 组件间的通信
(1)props:用于父组件向子组件传递消息 使用方法: 在父组件中,使用子组件时,<Child v-bind:data="data"/>,通过v-bind把子组件需要 ...
- Jmeter介绍1
要测试的响应字段: 响应文本:即响应的数据,比如json等文本 响应代码:http的响应代码,比如200,302,404这些 响应信息:http响应代码对应的响应信息,列如OK,Found Respo ...
- Jmeter+Badboy安装使用文档
Jmeter+Badboy安装使用文档 目录 1.jmeter安装 1 2.Jmeter基础使用 3 3. 使用Jmeter进行分布式测试 ...
- 前端开发利器 livereload -- 从此告别浏览器F5键
各位从事前端开发的童鞋们,大家每天coding && coding,然后F5 && F5,今天推荐一个静态文件在浏览器中自动更新的扩展 livereload,不同手动刷 ...
- 【坚持】Selenium+Python学习记录 DAY8
2018/05/ 28 [来源:菜鸟教程](http://www.runoob.com/python3/python3-examples.html) 继续敲类相关的代码 #No.1 class peo ...
- 06慕课网《进击Node.js基础(一)》作用域和上下文
作用域 function(){}大括号中的内容是一个作用域; function 和 var 的声明会被提到作用域的最上面 function f(){ a = 2; var b = g(); //此处可 ...
- 新手学ajax2
今天主要解决了一个困扰两天的ajax问题,就是关于从服务器获取数据时的同步和异步问题 , xhr.open("GET", url,false): 这里有三个参数“GET”表示获取的 ...