搜索後重新填充DataTables網格的示例

我對使用jQuery的DataTables Table插件不熟悉，並且已經能夠從後端數據庫檢索數據併成功將其顯示在網格中。這是在$（document.ready（））期間完成的。我創建了一個頁面，其中顯示了一些搜索條件，當用戶提交頁面時將重新填充表格。有人可以提供一個簡單的例子，展示如何通過提交重新填充表格的新結果嗎？我也在使用MVC，這也是我第一次處理這個問題的一部分。搜索後重新填充DataTables網格的示例

下面是我試過的jQuery代碼，但它沒有將結果綁定到已經存在的表。我也已經指定了ajax源代碼，只是在表中已經設置了其他選項，並且ajax源代碼都是需要更改的選項。

謝謝，湯姆

$('#SubmitForm').on('submit', function (e) { 
    table = $('#grid').DataTable(); 
    table.sAjaxSource = "GetEmails"; 
    table.bServerSide = true; 
    table.bProcessing = true; 
    table.aoColumns = [ 
     { "sName": "Id" }, 
     { "sName": "Email" }, 
     { "sName": "Reason" }, 
     { "sName": "Name" }, 
     { "sName": "Organization" }, 
     { "sName": "Email_Verified_Date" } 
    ]; 

    return true; 
});

的瀏覽器僅顯示如下所示的AJAX源的輸出。

{ 「sEcho」：空，「iTotalRecords」：94，「iTotalDisplayRecords」：94，「aaData」：[]}

下面是我的觀點摘錄這表明我是如何使用DataTable。

這樣做 - 注意DataTable在頁面加載期間通過document.ready呈現和填充。

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>How to use jQuery Grid with ASP.NET MVC</title> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      var oTable = $('#grid').dataTable({ 
       "bServerSide": true, 
       "sAjaxSource": "home/GetEmails1", 
       "bProcessing": true, 
       "aoColumns": [ 
           { "sName": "Id" }, 
           {"sName": "Email"}, 
           {"sName": "Reason"}, 
           { "sName": "Name" }, 
           { "sName": "Organization" }, 
           { "sName": "Email_Verified_Date" } 
       ] 
      }); 
    }); 

    </script> 
</head> 
<body> 
    <div class="table-responsive"> 
     <table id="grid"> 
      <thead> 
       <tr> 
        <th>Id</th> 
        <th>Email</th> 
        <th>Reason</th> 
        <th>Name</th> 
        <th>Organization</th> 
        <th>Email Verified Date</th> 
       </tr> 
      </thead> 
      <tbody> 
      </tbody> 
     </table> 
    </div> 
</body> 
</html>

這是第二個不起作用的視圖。在這裏，我試圖採用搜索條件，提交併使用搜索結果填充表格。上面的工作示例中的ajax調用和這裏的非工作示例都返回了來自ajax調用的相同結果。我在這個視圖中包含了頁面加載示例，並且認爲這可能有助於DataTable在搜索完成並重新填充時已經初始化。謝謝你的幫助！

@model MvcMovie.Models.ACORD360VerifiedEmail 

@{ 
    ViewBag.Title = "Home Page"; 
} 

<!DOCTYPE html> 

<html> 
    <head> 
     <meta name="viewport" content="width=device-width" /> 
     <title>Search Page</title> 

     <script type="text/javascript"> 
      $(document).ready(function() { 

       var oTable = $('#grid').dataTable({ 
        "bServerSide": true, 
        //"sAjaxSource": "GetEmails", 
        "sAjaxSource": "GetEmails", 
        "bProcessing": true, 
        "aoColumns": [ 
            { "sName": "Id" }, 
            { "sName": "Email" }, 
            { "sName": "Reason" }, 
            { "sName": "Name" }, 
            { "sName": "Organization" }, 
            { "sName": "Email_Verified_Date" } 
        ] 
       }); 

     $('#SubmitForm').on('submit', function (e) { //use on if jQuery 1.7+ 
      table = $('#grid').DataTable(); 
      table.ajax.reload(); 

      return true; 
     }); 
    }) 
     </script> 
    </head> 
    <body> 
    @using (Html.BeginForm("GetEmails", "ACORD360VerifiedEmail", FormMethod.Post, new { id = "SubmitForm" })) 
    { 
     <div class="panel-body"> 
      <h2>Lyris - ACORD360 Integration</h2> 
      <p class="lead">This allows you to modify Lyris and ACORD360 email data.</p> 
     </div> 

     <div class="row"> 
      <div class="col-md-3"> 
       @Html.LabelFor(m => m.EmailVerifiedStartDate) 
       @Html.TextBoxFor(m => m.EmailVerifiedStartDate, 
      new { @class = "form-control date-picker", placeholder = "Enter date here", id = "EmailVerifiedStartDate" }) 
      </div> 
      <div class="col-md-3"> 
       @Html.LabelFor(m => m.EmailVerifiedEndDate) 
       @Html.TextBoxFor(m => m.EmailVerifiedEndDate, new { @class = "form-control date-picker", placeholder = "Enter date here", id = "EmailVerifiedEndDate" }) 
      </div> 
      <div class="col-md-3"> 
       @Html.LabelFor(m => m.OrganizationName) 
       @Html.TextBoxFor(m => m.OrganizationName) 
      </div> 
      <div> 
       <input type="submit" value="Search" /> 
      </div> 
     </div> 
     <br /><br /><br /> 
     <div class="table-responsive"> 
      <table id="grid"> 
       <thead> 
        <tr> 
         <th>Id</th> 
         <th>Email</th> 
         <th>Reason</th> 
         <th>Name</th> 
         <th>Organization</th> 
         <th>Email Verified Date</th> 
        </tr> 
       </thead> 
       <tbody></tbody> 
      </table> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <br /><br /> 
       <label id="Error"></label> 
       <label id="Info"></label> 
      </div> 
     </div> 
    } 
    </body> 
</html>

來源

2016-07-26 Thomas DeVoe

在你的第二個例子，它看起來並不像你改變任何數據：

$('#SubmitForm').on('submit', function (e) { //use on if jQuery 1.7+ 
     table = $('#grid').DataTable(); 
     table.ajax.reload(); 

     return true; 
});

在提交時，你重裝表，然後張貼的形式。如果你要AJAX源數據，使用jQuery發佈的數據，然後成功重新加載表：

$.ajax({ 
    url: url, type: 'POST', 
    success: function() { 

     table.ajax.reload(); 
    } 
    }).fail(function() { 
     alert("Sorry. Server unavailable."); 
    });

來源

2016-07-26 14:36:32

我試過這個，但得到了同樣的結果。我已經驗證了從工作和非工作場景的ajax調用中返回的結果是相同的。這裏是我使用的代碼片段： table = $（'＃grid'）.DataTable（）; table.ajax.reload（）; –

你的工作和非工作場景是什麼意思？你如何提交數據？你如何期待它被改變？ –

我在主帖中爲上面的工作視圖和非工作視圖添加了代碼。謝謝你的幫助。 –

原來我有很多MVC，Ajax和數據表之間的學習。我最終使用按鈕點擊按鈕而不是使用提交。它運作良好。我不得不說，使用這種方法後，花了這麼多時間與ASP.Net Web窗體刷新。感謝所有提供建議的人。

來源

2016-08-18 14:08:09

搜索後重新填充DataTables網格的示例

回答

相關問題