文档章节

jquery datatables 添加跳转到指定页功能

o
 osc_odyg6b92
发布于 2018/07/13 13:57
字数 444
阅读 21
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

项目中使用了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;
}
o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.5K
8
我的架构演化笔记 功能1: 基本的用户注册

“咚咚”,一阵急促的敲门声, 我从睡梦中惊醒,我靠,这才几点,谁这么早, 开门一看,原来我的小表弟放暑假了,来南京玩,顺便说跟我后面学习一个网站是怎么做出来的。 于是有了下面的一段...

强子哥哥
2014/05/31
976
3
树莓派(Raspberry Pi):完美的家用服务器

自从树莓派发布后,所有在互联网上的网站为此激动人心的设备提供了很多有趣和具有挑战性的使用方法。虽然这些想法都很棒,但树莓派( RPi )最明显却又是最不吸引人的用处是:创建你的完美家用...

异次元
2013/11/09
7.1K
8
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.8K
1
表单验证插件--Jquery表单验证插件

目前支持对以下格式的值进行验证: cnum-(纯数字), char-(纯字母), zwen-(中文), bysc-(字母开头), mail(邮箱), yzbm(邮政编码) 其中的‘’表示长度,比如“zwen1-5”表示中文1-5位的长度。同...

huanganiu
2013/01/23
4.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

SQL 语句大全

点击上方“掌上编程”,选择“置顶或者星标” 优质文章第一时间送达! 一、基础 「1、说明:创建数据库」 CREATE DATABASE database-name    「2、说明:删除数据库」 drop database ...

GeneralMa
昨天
0
0
山东创睦网络科技有限公司:使用Python爬取全球新冠肺炎疫情数据

使用Python爬取全球新冠肺炎疫情数据 导入所需库包 获取实时数据的url 正式编写程序 查看输出结果 导入所需库包 在获取数据之前,我们需要先安装好所需的包requests和pandas: 1.如果是使用p...

osc_qv1fwke0
55分钟前
14
0
如何1年获得别人3年的工作经验(深度好文)

最近有同学问我,为什么你的工作年限不长,技术却这么厉害,我笑了笑,啥也没说。 我不是不想回答,是不知道怎么回答。在他们的定位可能就是,每方面都懂一点,遇到问题能够快速解决,就是比...

zhang_rick
今天
1
0
新基建带动行业

什么是“新基建”? 什么是“新基建”? 根据央视发布的信息来看,其涵盖了5G基站建设、新能源汽车充电桩、大数据中心、人工智能、工业互联网,特高压,城际以及城轨交通,涉及了七大领域和相...

osc_anefoz50
55分钟前
16
0
怕入错行?这群技术人写了本“择业指南”

计算机专业好找工作吗?哪些方向是当前的主流和热门方向呢? 计算机专业的你是不是还在为职业发展纠结犹豫呢? 刚经历完高考选专业的你是不是还在迷茫徘徊呢? 那么福利来啦! 《软件技术职业...

阿里云云栖号
55分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部