Comment puis-je actualiser jQuery DataTable sans actualiser la page?

Question

J'utilise une fonctionnalité de recherche multi-colonne dans mon Datatable, j'ai également un bouton de réinitialisation qui efface toutes les recherches et obtient le DataTable à son état par défaut.

Cela fonctionne très bien.

Mais je veux savoir comment réinitialiser le datatable sans actualiser la page .. ??

Aidez-nous s'il vous plaît. Merci d'avance.

Voici le code HTML pour le bouton Reset:

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

Ce qui suit est de réinitialiser le tableau à l'état initial

oTable.fnDraw(); 

Answer 1

Après une rapide recherche sur Google, j'ai trouvé une fonction, vous pouvez utiliser la réinitialisation/recharger la table. Vous pouvez le faire en utilisant AJAX et la fonction ajax.reload() à partir du plugin datatables.

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

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

Documentation: datatables ajax.reload()

Answer 2

Vous devez appeler la fonction fnDraw() datatable le bouton événement click:

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

Cela suppose que vous avez déjà affecté l'objet DataTable var oTable. Vous devez également avoir réinitialisé les champs de recherche avant d'appeler le fnDraw(), sinon vous effectuerez une autre recherche.

Answer 3

Code pour DataTables:

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; 
    });}); 

C'est la forme contenant un WebGrid et le bouton Reset:

@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

Vous pouvez utiliser ce code:

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