项目中使用了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 添加跳转到指定页功能
原文地址：https://www.cnblogs.com/feiyu127/p/9304556.html