如何在沒有頁面刷新的情況下刷新jQuery DataTable？

Question

我在我的Datatable中使用多列搜索功能，我也有一個重置按鈕，它清除所有搜索並獲取DataTable的默認狀態。

這工作正常。

但我想知道如何重置數據表而無需刷新頁面。

請幫忙。 在此先感謝。

以下是復位鍵HTML：

<button class="Reset form-control" id="reset">Reset table to Original State</button> 

下面是表恢復到原來的狀態

oTable.fnDraw(); 

Answer 1

一個快速谷歌搜索我發現了一個功能，你可以使用重置後/重新載入表格。您可以通過使用AJAX和datatables插件中的ajax.reload（）函數來完成。

var table = $('#example').DataTable(); 

table.ajax.reload(function (json) { 
    $('#myInput').val(json.lastInput); 
}); 

文檔：datatables ajax.reload()

Answer 2

您需要調用按鈕單擊事件的數據表fnDraw()功能：

$('#reset').on('click', function(e){ 
    e.preventDefault() 
    oTable.fnDraw(); 
}); 

這假定您已經分配DataTable對象爲VAR oTable。在調用fnDraw()之前，您也必須重置搜索字段，否則您將只執行另一次搜索。

Answer 3

代碼數據表：

var oTable; 
var asInitVals = new Array(); 

$(document).ready(function() { 
    oTable = $('#webgrid').dataTable({ 
    //"sDom": 'C<"clear">lfrtip', 
     sDom: 'Bfrtip', 
     buttons: [ 
      { 
       extend: 'copyHtml5', 
       exportOptions: { 
        columns: [0, ':visible'] 
       } 
      }, 
      { 
       extend: 'excelHtml5', 
       exportOptions: { 
        columns: ':visible' 
       } 
      }, 
      'colvis' 
     ], 
     "sSearch": "Search all columns:", 
     "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], 
     colReorder: true, 
    }); 
    //To reset table to original state 
    $('#reset').on('click', function (e) { 
     e.preventDefault(); 
     oTable.fnDraw(); 
    }); 
    //oTable.fnDraw(); 

    $("tfoot input").keyup(function() { 
     /* Filter on the column (the index) of this element */ 
     oTable.fnFilter(this.value, $("tfoot input").index(this)); 
    }); 
    /* 
    * Support functions to provide a little bit of 'user friendlyness' to the textboxes in 
    * the footer 
    */ 
    $("tfoot input").each(function (i) { 
     asInitVals[i] = this.value; 
    });}); 

這是包含的WebGrid和復位按鈕的形式：

@using (Html.BeginForm("Persons", "Welcome", FormMethod.Get, new { @class = "Search-form", @id = "form1" })) 

{ 
<div id="DivGrid"> 
    @{ 
var grid = new WebGrid(source: Model, canPage: false, 
     defaultSort: "Employee_ID", columnNames: new[] { "Employee_ID", "First_Name", "Last_Name", "Date_Of_Birth" }); 
if (Model.Count() > 0) 
{ 
     @grid.Table(tableStyle: "PGrid", headerStyle: "Header", footerStyle: "Footer", alternatingRowStyle: "altRow", htmlAttributes: new { id = "webgrid" }, columns: grid.Columns(
       grid.Column("Employee_ID", "Employee ID", 
      format: @<text> <span class="display-mode">@item.Employee_ID </span> 
      <label id="EmployeeID" class="edit-mode">@item.Employee_ID</label> </text>, style: "col2Width EmployeeID"), 

      grid.Column("First_Name", "First Name", format: @<text> <span class="display-mode"> 
       <label id="lblFirstName">@item.First_Name</label> 
      </span> <input type="text" id="FirstName" value="@item.First_Name" class="edit-mode" name="firstname" /></text>, style: "col2Width"), 

      grid.Column("Last_Name", "Last Name", format: @<text> <span class="display-mode"> 
       <label id="lblLastName">@item.Last_Name</label> 
      </span> <input type="text" id="LastName" value="@item.Last_Name" class="edit-mode" name="lastname" /> </text>, style: "col2Width"), 

      grid.Column("Date_Of_Birth", "Date Of Birth", format: item => ((item.Date_Of_Birth == null) ? "" : item.Date_Of_Birth.ToString("MM/dd/yyyy")), style: "DateOfBirth"), 
      grid.Column(header: "Action", canSort: false, style: "action", format: @<text> 
       <button class="edit-user display-mode glyphicon glyphicon-edit"> Edit</button> 
       <button class="display-mode delete-item glyphicon glyphicon-trash"> Delete</button> 
       <button class="save-user edit-mode glyphicon glyphicon-save"> Save</button> 
       <button class="cancel-user edit-mode glyphicon glyphicon-remove-sign"> Cancel</button></text>))); 
    <table class='container'> 
     <tfoot class='filters multipleSearch col-md-12'> 
      <tr class="tBoxes"> 
       <th class="txtBoxWidth"> 
        <input class='txtBox1 form-control' placeholder='Employee Id' /> 
        @*<input type="text" name="Employee Id" placeholder='Employee Id' class="search_init" />*@ 
       </th> 
       <th class="txtBoxWidth"> 
        <input class='txtBox2 form-control' placeholder='First Name' /> 
       </th> 
       <th class="txtBoxWidth"> 
        <input class='txtBox3 form-control' placeholder='Last Name' /> 
       </th> 
       <th class="txtBoxWidth"> 
        <input class='txtBox4 form-control' placeholder='Date of Birth' /> 
       </th> 
       <th> 
        <input type="reset" value="Reset table to Original State" class="Reset btn btn-sm" /> 
          @*<button type="reset" class="Reset form-control" id="reset">Reset table to Original State</button>*@ 
       </th> 
      </tr> 
     </tfoot> 
    </table> 
</div> 
     <br> 
}} 

Answer 4

您可以使用此代碼：

$(tableId).dataTable().fnDraw();