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插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...
随机推荐
- P4546 [THUWC2017]在美妙的数学王国中畅游
如果只有第3个操作,那么这就是个sd题,随便lct搞搞就过去了 然后就是一个神仙东西 taylor公式 我不会,看gsy博客https://www.cnblogs.com/zhoushuyu/p/81 ...
- vue复习(二)
一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点 每个组件模板只能拥有一个根标签 子组件的数据具有作用域,以达到组件的复用 二.局部组件 & ...
- Tomcat部署Web应用
在Tomcat中部署Web有三种方法: 1,可以将Web应用文件直接复制到webapps目录下,也可以将Web应用打成war包放到webapps目录下,tomcat会自动解开war包,并在webapp ...
- Tomcat 下载与安装
下载地址:http://tomcat.apache.org 根据自己电脑的系统下载Core节点下不同的版本. Tomcat文件目录结构 bin:存放启动与关闭Tomcat的脚本文件 conf:存放 ...
- 图片轮播,信手拈来(jquery)
制作图片轮播,可以说是js或者jquery学习者应该掌握的技巧.但惭愧的是本菜之前一直一知半解,这回抽了半天多总结了下分享给大家.虽然标题比较吹牛,但目的是希望大家看了之后制作图片轮播会非常迅速. 首 ...
- Linux之linux入门
学习linux之前先了解一下操作系统: 操作系统的定义: 操作系统(英语:operating system,缩写作 OS)是管理计算机硬件与软件资源的计算机程序,同时也是计算机系统的内 ...
- grads,fortran,ncl二进制文件
#转自论坛日志# grad用fwrite生成的二进制文件大小和ncl用fbinwrite生成的不一样,相差有8个字节,参考了以下网页,问题出在顺序存取和直接存取的差异. 以下是我的理解,欢迎指正: ...
- MySQL日志系统:redo log与binlog
日志系统主要有redo log(重做日志)和binlog(归档日志).redo log是InnoDB存储引擎层的日志,binlog是MySQL Server层记录的日志, 两者都是记录了某些操作的日志 ...
- [Unity Shader] 切线空间的法线贴图
切线空间的法线贴图,可以这样理解: #纹理坐标是从0到1,它的坐标是x向右,y向下 #顶点坐标是从-1到-1,坐标是x向右,y向上 1 由表面上某点的切线Tangent.副切线Bitangent.法线 ...
- Python3列表中获取相同元素出现位置的下标
前言 list: Python3的列表类型, 和其他语言中的数组类似 定义格式: l = ["a", "b", "c", "a&q ...