javascript - 在 Footable 重新加载或重绘时重置分页

Question

我目前正在开发一个将在表格中显示数据的网络应用程序。

对于此应用程序的一部分，我们列出了某些应用程序的当前状态。如果您单击表格中的其中一个应用程序，ajax 调用会在我们的数据库中获取该应用程序的 ID，并提取该应用程序的所有状态列表及其日期。

虽然这一切都很好而且花花公子，但我们的问题是分页形式。如果您导航到第一个表格的第二页，该表格包含每个应用程序的当前状态，并单击具有五个以上状态列表的应用程序(我们的数据页面大小限制为 5)，那么第二个表格将从第二页数据开始。

虽然导航回第一页正常，并且表格中的数据仍然正确显示，但这是我们不希望出现的问题。我们想要做的是让分页在表格重新加载时自动显示结果的第一页。

到目前为止，我们尝试的是为 footable 找到一个页面重置触发器，尝试定位表页脚中的第一个页面项目并执行 .click(我们找不到定位它的方法，因为它已生成)，重新初始化表格，并在我们可以使用的 footable javascript 文件中找到一个预制函数。

我想知道的是，有没有办法设置分页在表格重绘时显示第一页？

_{目前，我们正在重绘表格以修复我们遇到的另一个分页问题。}

当前代码:

function getAppStats(id) {
        $.ajax({
            Async: false,
            url: '@Url.Action("GetAppStatusList", "Application", Nothing, Request.Url.Scheme)',
            type: 'POST',
            data: { id: id },
            success: function (data) {
                var label = "" 

                //The headers change on the new table, so I need to change the headers dynamically
                var newHTML = "<thead><tr><th data-toggle=\"true\">Application</th><th>Application ID</th><th>Date</th><th>Status</th></tr></thead><tbody>"

               //Iterating through the list of statuses, and if it's not one of three values, assigning an on-click to display more data.
                $(data).each(function (index, item) {
                    if (item.status != "Created Date" && item.status != "Inactivated" && item.status != "Active"){
                        newHTML = newHTML + "<tr id=\"" + item.appId + "\" onclick=\"getDeployComments(" + item.typeId + ", " + item.appId + ")\"><td id=\"app\">" + item.name + "</td><td>" + item.appId + "</td><td id=\"date\">" + item.date + "</td><td id=\"stat\">" + item.status + "</td></tr>"
                    } else {
                        newHTML = newHTML + "<tr id=\"" + item.appId + "\"><td id=\"app\">" + item.name + "</td><td>" + item.appId + "</td><td id=\"date\">" + item.date + "</td><td id=\"stat\">" + item.status + "</td></tr>"
                    }

                    label = item.name + " Deployment History"
                })
                newHTML = newHTML + "</tbody><tfoot class=\"hide-if-no-paging\"><tr><td colspan=\"5\"><div class=\"pagination pagination-centered list-inline list-inline\"></div></td></tr></tfoot>"

                $('#appTable').html(newHTML)

                //There's other HTML adding here, but it has nothing to do with the problem at hand.

                $('table').trigger('footable_redraw'); //Redrawing the table to fix an issue we had with pagination not showing at all.
            },
            error: function () {

            }
        })
    }

Answer 1

一个解决方案是通过其数据属性定位第一个页面链接并在其上触发点击事件:

$('.footable-page a').filter('[data-page="0"]').trigger('click');

FooTable redraw 事件创建了分页元素，因此请确保先出现。