Question

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

对于此应用程序的一部分，我们列出了某些应用程序的当前状态。如果单击表中的某个应用程序，则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事件会创建分页元素，因此请确保首先出现。

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

1 个答案: