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

匿名 (未验证) 提交于 2019-12-02 21:53:52

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

原文:https://www.cnblogs.com/feiyu127/p/9304556.html

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!