zoukankan      html  css  js  c++  java
  • 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;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;
    }
    
  • 相关阅读:
    MySQL数据库优化的八种方式(经典必看)
    HTML5之应用缓存---manifest---缓存使用----HTML5的manifest缓存
    ajax方法总结
    十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less))
    MySQL主从复制技术(纯干货)
    table不能遗露了tbody
    DOM 之selection
    DOM 其他一些特性
    CSSOM视图模式
    DOM 节点实例操作
  • 原文地址:https://www.cnblogs.com/feiyu127/p/9304556.html
Copyright © 2011-2022 走看看