项目中使用了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 添加跳转到指定页功能的更多相关文章

  1. Datatables跳转到指定页

    因为项目用到Datatables发现在分页特别多时无法跳转到指定页,自己动手增加了#Datatables 跳转到指定页#功能,实现代码如下: table = $('#user-table').data ...

  2. 从手机浏览器或者 APP 中跳转到微信并跳转到指定页原理及行业内幕详解

    相信很多朋友遇到过有些网站,可以直接通过一个连接就能让你的手机打开微信且跳转到某个指定的页面,许多程序员很好奇到底是怎么实现的,到处求这种方法的源码,在文本中我会介绍及剖析这种跳转实现的原理. 微信是 ...

  3. 利用.Net自带的票据完成BaseController的未登陆自动跳转到登陆页功能

    一:定义票据中要记录的字段类 /// <summary> /// 用户存在于浏览器端的身份票据(非持久) /// 非持久 FormsAuthenticationTicket 的isPers ...

  4. jquery.pagination.js添加跳转页

    原作者github地址:https://github.com/gbirke/jquery_pagination 在这基础上加入了跳转到指定页. 修改后的jquery.pagination.js /** ...

  5. jQuery DataTables 使用手册(精简版)

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/5182940.html 前排提醒,这个插件能不用就不用,那么多好的插件等着你,为什么要用它呢?就算用easyui的 ...

  6. 【前端】jQuery DataTables 使用手册(精简版)

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/5182940.html 前排提醒,这个插件能不用就不用,那么多好的插件等着你,为什么要用它呢?就算用easyui的 ...

  7. ASP-----分页功能的实现

    WEB 分页功能的实现后端C#代码部分: // 建立Linq 数据库的连接 private MYDateDataContext context = new MYDateDataContext(); / ...

  8. [转] JQuery UI Tabs 动态添加页签,并跳转到新页签

    [From] https://blog.csdn.net/zhangfeng2124/article/details/76672403 需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添 ...

  9. jQuery DataTables插件分页允许输入页码跳转

    背景说明 项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...

随机推荐

  1. Form,tagName和nodeName的区别

    首先介绍DOM里常见的三种节点类型(总共有12种,如docment):元素节点,属性节点以及文本节点,例如<h2 class="title">head</h2&g ...

  2. Direct2D处理几何图形之间的碰撞检测(上)

    转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 Direct2D中支持以下几种类型的几何图形: a.简单几何图形(Simple Geometry):矩形.圆角矩 ...

  3. 3.PO如何给开发团队讲好故事

    敏捷开发系列文章目录 讲出符合开发团队味口的故事. 上一章说了敏捷开发团队的构成与迭代过程,本章重点说一下迭代第一天的计划会议.熟话说“好的开始就成功了一半”,一个迭代的计划会议做得好不好确实直接注定 ...

  4. 初学者浅度剖析eShopOnContainers 里面用到的MediatR .

    一.介绍 简单了解下开源项目 MedatR, eShopOnContainers, MediatR作者Jimmy Bogard : Simple mediator implementation in ...

  5. SQL常见面试题

    1.用一条SQL 语句 查询出每门课都大于80 分的学生姓名 name   kecheng   fenshu张三    语文       81张三     数学       75李四     语文   ...

  6. 容器类 - bootStrap4常用CSS笔记

    .container 居中容器类,最大宽度默认为1200px.左右间隙15px .container-fluid 全屏容器类. .jumbotron 创建一个大的灰色的圆角背景框 .jumbotron ...

  7. java基础---类加载和对象创建过程

    类中可以存在的成员: class A{ 静态成员变量: 非静态成员变量: 静态函数: 非静态函数: 构造函数 A(..){...} 静态代码块 static{...} 构造代码块 {...} } 类加 ...

  8. Appium 安装详细版教程

      1.安装Appium Python Client包 输入命令  pip install Appium-Python-Client  

  9. shell解析ini格式文件

    功能 本脚本实现了ini文件中的查询修改指定value 百度云连接地址 链接:https://pan.baidu.com/s/12_T5yST7Y3L1H4_MkVEcvA 密码:fo5p 解压后先看 ...

  10. NO.2:自学tensorflow之路------BP神经网络编程

    引言 在上一篇博客中,介绍了各种Python的第三方库的安装,本周将要使用Tensorflow完成第一个神经网络,BP神经网络的编写.由于之前已经介绍过了BP神经网络的内部结构,本文将直接介绍Tens ...