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;
}