在腳上重新設置分頁重新加載或重繪

Question

我目前正在研究將在表中顯示數據的Web應用程序。

對於這個應用程序的一部分，我們列出了某些應用程序的當前狀態。如果您單擊表中的某個應用程序，則ajax調用會在我們的數據庫中抓取應用程序的ID並提取該應用程序的所有狀態列表及其日期。

儘管這一切工作正常，我們的問題以分頁的形式出現。如果您導航到第一個表格的第二頁，該表格包含每個應用程序的當前狀態，然後單擊具有五個以上狀態列表的應用程序（我們的數據頁面大小限制爲5），則第二個表格將會從第二頁數據開始。

在導航回第一頁時工作正常，表中的數據仍然正確顯示，這是我們不希望看到的問題。我們想要做的是分頁自動顯示錶重新加載結果的第一頁。

我們到目前爲止所嘗試的是尋找一個頁腳重置觸發器腳步，試圖鎖定表格頁腳中的第一個頁面項目並執行一個.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

一種解決方案是通過它的數據屬性爲目標的第一個頁面鏈接，並觸發其click事件：

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

的FooTable redraw事件創建分頁元素，所以請確保首先出現。