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插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...
随机推荐
- JAVAEE Eclipse 控制台用起来感觉很不方便的原因
这是因为切换成了java面板的原因 因为之前有切换到过 java project 项目,所以才转到了这个面板,之后如果不手动改即便是用javaee也会是这个面板,因而用起来不方便 解决方法: 切换到j ...
- python模块-datetime模块
上面一篇已经讲了time模块,再来学习datetime模块. datetime主要有datetime.timedelta.time.date这4个子模块. a.datetime常用的函数(dateti ...
- JavaScript——变量与基本数据类型
前言 JavaScript中的变量为松散类型,所谓松散类型就是指当一个变量被申明出来就可以保存任意类型的值,就是不像SQL一样申明某个键值为int就只能保存整型数值,申明varchar只能保存字符串. ...
- 用Metaclass实现一个精简的ORM框架
存档: # -*- coding: utf-8 -*- class Field(object): def __init__(self, name, column_type): self.name = ...
- Jmeter性能指标分析
以下是下载了服务器监控插件的各个组件的功能介绍,有助于以后jmeter的性能测试 1.jp@gc - Actiive Threads Over Time:不同时间的活动用户数量展示(图表) 当前的时间 ...
- UnityEditor扩展-Shader浏览器
1. 用途 用于浏览项目所有Shader被使用的情况 2. 界面说明 Ignore Directory:添加不搜索的文件夹,不添加默认搜索全部 Find按钮:开始搜索 Used Shaders:已被使 ...
- C#多线程的几种使用
参见链接 :http://www.jb51.net/article/46234.htm
- 马赛克是否无法逆转?Python简单消除,看片无忧!
图片水印,轻松去除 前段时间玩过了全民K歌,不知道大家是否玩过,还是做得挺好的,就我这嗓子都能唱出张学友的味道,其中更是有消除噪声的功能,就是朋友们都在吃鸡大叫,我在旁边唱歌依然不受影响. 既然声音可 ...
- Python 命令行解析工具 Argparse介绍
最近在研究pathon的命令行解析工具,argparse,它是Python标准库中推荐使用的编写命令行程序的工具. 以前老是做UI程序,今天试了下命令行程序,感觉相当好,不用再花大把时间去研究界面问题 ...
- Dao DaoImp
DAO层:DAO层主要是做数据持久层的工作,负责与数据库进行联络的一些任务都封装在此,DAO层的设计首先是设计DAO的接口,然后在Spring的配置文件中定义此接口的实现类,然后就可在模块中调用此接口 ...