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插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...
随机推荐
- Object C学习笔记3-对象的使用和定义
1. 如何定义一个对象 在面向对象的语言中,定义一个对象是使用Class关键字,而在Object-C中则是使用@interface,@interface用于定义对象的属性和方法,@implementa ...
- Django—— restful 设计风格
RESTful Api设计风格 协议:API 与用户的通信协议,总是使用 HTTPS 协议 域名:应该尽量将 API 部署在专用域名之下,如果确定 API 很简单,不会有进一步的扩展,可以考虑放在主域 ...
- tomcat 在liunx中shutdown后进程仍然存在的两种实用解决办法
方法一: 查找tomcat进程并kill ps -elf | grep ${ctompath} | grep -v grep | awk '{print $4}' | xargs kill -9 此处 ...
- Babylon.js官方性能优化文档中文翻译
在这里列出Babylon.js官方性能优化文档的中英文对照,并在CardSimulate项目里对其中的一些优化方法进行实践. How To 如何 Optimize your scene 优化你的场景 ...
- Linux Ubuntu 安装、汉化、常用操作
一.安装Ubuntu Desktop 安装前准备 现在的PC机都可以满足要求. 软件准备 vmware:http://www.vmware.com/cn ubuntu:18ubuntu Desktop ...
- hadoop最新稳定版本使用建议
Apache Hadoop Apache版本衍化比较快,我给大家介绍一下过程 ApacheHadoop版本分为两代,我们将第一代Hadoop称为Hadoop 1.0,第二代Hadoop称为Hadoop ...
- Tomcat源码学习(3)—— Digester介绍
Digester方法详解: 通读Digester之前先分析下他的结构: 1.1该类继承了方法DefaultHandler2,DefaultHandler2继承了DefaultHandler是和sax解 ...
- 服务器与Linux操作系统基础原理
1.服务器 2.Linux操作系统 1. 服务器 服务器定义与分类: 定义:一个管理资源并为用户提供服务的计算机软件. 按应用分类:通常分为文件服务器(能使用户在其它计算机访问文件),数据库服务器和应 ...
- Navicat新建查询,系统找不到指定路径 独家解决办法
Navicat新建查询系统找不到指定路径,很多人用了网上流行的那些解决办法,还是无法解决.比如: https://jingyan.baidu.com/article/86112f1387a713273 ...
- javaweb 安全传输签名机制
java web传输中的安全签名说明: 对请求中的数据 Key对进行签名,最终生成一个签名字符串,标记为sign:"djflw8wejwl9w0ejwlush8fw9ew9",位数 ...