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

Question

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

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

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

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

到目前为止，我们尝试的是为 footable 找到页面重置触发器，尝试定位表页脚中的第一个页面项目并执行 .click（由于如何它已生成），重新初始化表，并在我们可以使用的可编写脚的 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 事件会创建分页元素，因此请确保先出现。