Javascript 分页在表的开关上不起作用

我有一个页面，其中两个表在一个按钮调用上切换。当页面加载时，分页工作正常，但当我切换到另一个表并返回到上一个表时，分页停止工作。 切换到其他表时分页停止工作。你能帮我一下吗？我不熟悉jquery、Javascript

以下是我的JSP代码：

        function switchTable(status) {
            if (status === "approved") {
                $(".tables-li").css("background-color", "inherit");
                $(".approved-li").css("background-color", "grey");
                $(".status-table").hide();
                $(".status-table-approved").show();
                populateApprovedTable();
            } else if (status == "pending") {
                $(".tables-li").css("background-color", "inherit");
                $(".pending-li").css("background-color", "grey");
                $(".status-table").hide();
                $(".status-table-pending").show();
                populatePendingTable();
            }
        }

        function populateApprovedTable() {
            $
                    .getJSON(
                            '/dashboard/usersList/approved',
                            function(data) {
                                console.log("Approved Users Table data : "
                                        + data);
                                
                                $("#approvedTable").empty();

                                $(data)
                                        .each(
                                                function(i, data) {
                                                    $('#approvedTable').append($("<tr>")
                                                                            .append($("<td id='btnShow' onclick='getUserDetails("+ data[0]+ ")'>").append(data[1]))
                                                                            .append($("<td>").append(data[2]))
                                                                            .append($("<td>").append(data[8]))
                                                                            .append($("<td>").append(data[3]))
                                                                            .append($("<td>").append(data[4]))
                                                                            .append($("<td>").append(data[7]))
                                                                            .append($("<td>").append($("<label class='dropdown' data-toggle='dropdown'>")
                                                                                                            .append($("<div class='dropdown ml-4'>")
                                                                                                                .append($("<span>")
                                                                                                                    .append($("<i class='fa fa-ellipsis-v' aria-hidden='true'>")
                                                                                                                        )
                                                                                                                    )
                                                                                                                )
                                                                                                            )
                                                                                                    .append($("<ul class='dropdown-menu m-0 align-items-center'>")
                                                                                                        .append($("<li class='border-bottom p-2 font-weight-bold text-center' onclick='deactivate("+ data[0]+ ")'>")
                                                                                                            .append("DeActivate")
                                                                                                            )
                                                                                                            .append($("<li style: 'cursor: pointer;' class='border-bottom p-2 font-weight-bold text-center'>")
                                                                                                                .append("Reset Login Info")
                                                                                                                )
                                                                                                            )
                                                                                                    )
                                                                            );
                                                });
                                $('#tableData1').paging({limit:2});
                            }).done(function() {
                                
                        console.log("Completed");

                    }).fail(function(e) {
                        console.log('error:');
                        console.error(e);
                        redirectOnTimeout();

                    }).always(function() {
                        console.log("always runs");
                    });
             
        }
        function populatePendingTable() {
            $
                    .getJSON(
                            '/dashboard/usersList/pending',
                            function(data) {
                                console.log("Pending Users Table data : "
                                        + data);
                            
                                $("#pendingTable").empty();

                                $(data)
                                        .each(
                                                function(i, data) {
                                                    $('#pendingTable').append($("<tr>").append($("<td id='btnShow' onclick='getUserDetails("+ data[0]+ ")'>").append(data[1]))
                                                                            .append($("<td>").append(data[8]))
                                                                            .append($("<td>").append(data[4]))
                                                                            .append($("<td>").append(data[6]))
                                                                            .append($("<td>").append($("<label class='dropdown' data-toggle='dropdown'>")
                                                                                                            .append(
                                                                                                                    $(
                                                                                                                            "<div class='dropdown ml-4'>")
                                                                                                                            .append(
                                                                                                                                    $(
                                                                                                                                            "<span>")
                                                                                                                                            .append(
                                                                                                                                                    $("<i class='fa fa-ellipsis-v' aria-hidden='true'>"))))

                                                                                            )
                                                                                            .append(
                                                                                                    $(
                                                                                                            "<ul class='dropdown-menu m-0 align-items-center'>")
                                                                                                            .append(
                                                                                                                    $(
                                                                                                                            "<li class='border-bottom p-2 font-weight-bold text-center' onclick='activate("+ data[0]+ ")'>")
                                                                                                                            .append(
                                                                                                                                    "Activate"))
                                                                                                            .append(
                                                                                                                    $(
                                                                                                                            "<li style: 'cursor: pointer;' class='border-bottom p-2 font-weight-bold text-center'>")
                                                                                                                            .append(
                                                                                                                                    "Reset Login Info")))));
                                                });
                                $('#tableData2').paging({limit:2});
                            }).done(function() {
                                
                        console.log("Completed");

                    }).fail(function(e) {
                        console.log('error:');
                        console.error(e);
                        redirectOnTimeout();

                    }).always(function() {
                        console.log("always runs");
                        
                    });

功能切换表（状态）{
如果（状态==“已批准”）{
$（“.tables li”）.css（“背景色”、“继承”）；
$（“.approved li”）.css（“背景色”、“灰色”）；
$（“.status table”）.hide（）；
$（“.status table approved”）.show（）；
populateApprovedTable（）；
}else if（状态=“待定”）{
$（“.tables li”）.css（“背景色”、“继承”）；
$（“.pending li”）.css（“背景色”、“灰色”）；
$（“.status table”）.hide（）；
$（“.status table pending”）.show（）；
populatePendingTable（）；
}
}
函数populateApprovedTable（）{
$
.getJSON(
“/dashboard/usersList/approved”，
功能（数据）{
console.log（“已批准的用户表数据：”
+数据）；
$（“#approvedTable”）.empty（）；
$（数据）
.每个(
功能（一、数据）{
$（'#approvedTable'）。追加（$（“”）
.append（$（“”）。append（数据[1]））
.append（$（“”）。append（数据[2]））
.append（$（“”）。append（数据[8]））
.append（$（“”）。append（数据[3]））
.append（$（“”）。append（数据[4]））
.append（$（“”）。append（数据[7]））
.append（$（“”）。append（$（“”）
.append（$（“”）
.append（$（“”）
.append（$（“”）
)
)
)
)
.append（$（“
”）
.append（$（“
”）
.append（“重置登录信息”）
)
)
)
);
});
$（'#tableData1'）。分页（{limit:2}）；
}).done（函数（）{
控制台日志（“已完成”）；
}).失败（功能（e）{
console.log（'error:'）；
控制台错误（e）；
重定向超时（）；
}).always（函数（）{
console.log（“始终运行”）；
});
}
函数populatePendingTable（）{
$
.getJSON(
“/dashboard/usersList/pending”，
功能（数据）{
日志（“挂起的用户表数据：”
+数据）；
$（“#pendingTable”）.empty（）；
$（数据）
.每个(
功能（一、数据）{
$（'#pendingTable'）。追加（$（“”）。追加（$（“”）。追加（数据[1]））
(function($) {
    alert("Hello! I am Called!");
    $(function() {
        $.widget("zpd.paging", {
            options: {
                limit: 5,
                rowDisplayStyle: 'block',
                activePage: 0,
                rows: []
            },
            _create: function() {
                var rows = $("tbody", this.element).children();
                this.options.rows = rows;
                this.options.rowDisplayStyle = rows.css('display');
                var nav = this._getNavBar();
                this.element.after(nav);
                this.showPage(0);
            },
            _getNavBar: function() {
                var rows = this.options.rows;
                var nav = $('<div>', {class: 'paging-nav'});
                for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) {
                    this._on($('<a>', {
                        href: '#',
                        text: (i + 1),
                        "data-page": (i)
                    }).appendTo(nav),
                            {click: "pageClickHandler"});
                }
                //create previous link
                this._on($('<a>', {
                    href: '#',
                    text: '<<',
                    "data-direction": -1
                }).prependTo(nav),
                        {click: "pageStepHandler"});
                //create next link
                this._on($('<a>', {
                    href: '#',
                    text: '>>',
                    "data-direction": +1
                }).appendTo(nav),
                        {click: "pageStepHandler"});
                return nav;
            },
            showPage: function(pageNum) {
                var num = pageNum * 1; //it has to be numeric
                this.options.activePage = num;
                var rows = this.options.rows;
                var limit = this.options.limit;
                for (var i = 0; i < rows.length; i++) {
                    if (i >= limit * num && i < limit * (num + 1)) {
                        $(rows[i]).css('display', this.options.rowDisplayStyle);
                    } else {
                        $(rows[i]).css('display', 'none');
                    }
                }
            },
            pageClickHandler: function(event) {
                event.preventDefault();
                $(event.target).siblings().attr('class', "");
                $(event.target).attr('class', "selected-page");
                var pageNum = $(event.target).attr('data-page');
                this.showPage(pageNum);
            },
            pageStepHandler: function(event) {
                event.preventDefault();
                //get the direction and ensure it's numeric
                var dir = $(event.target).attr('data-direction') * 1;
                var pageNum = this.options.activePage + dir;
                //if we're in limit, trigger the requested pages link
                if (pageNum >= 0 && pageNum < this.options.rows.length) {
                    $("a[data-page=" + pageNum + "]", $(event.target).parent()).click();
                }
            }
        });
    });
})(jQuery);

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/paging.js"></script>