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

Posted 2020-12-04 飞羽127

项目中使用了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;
}