5

我目前正在开发一个将在表格中显示数据的 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 () {

            }
        })
    }
4

1 回答 1

5

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

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

FooTableredraw事件会创建分页元素，因此请确保先出现。

于 2014-07-07T19:47:54.600 回答