项目中使用了jquery datatables 做为咱们的数据表格组件,可是分页上没有跳转到指定页,须要本身从新写。解决方法以下:jquery
在设置dataTables的默认属性里设置它的drawCallback方法来在后面拼接跳转元素,本方法是datatables 1.10日后的版本ajax
本代码是针对spring mybatis pageHelper插件返回的PageInfo来进行处理的,返回的结构是{success:true, data : pageInfo},若是只是看自定义跳转,只须要看里面的drawCallback方法spring
/** * 设置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; }