How can I refresh jQuery DataTable without Page Refresh?

Question

I am using a multi-column search functionality in my Datatable, I also have a reset button which clears all the searches and gets the DataTable to it's default state.

That works fine.

But I want to know how to reset the datatable without refreshing the page..??

Please help. Thanks in advance.

The following is the html for Reset Button:

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

The following is to reset table to original state

 oTable.fnDraw();

Answer 1

You can use this code:

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

Answer 2

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

This is the form containing a WebGrid and the Reset Button :

@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 3

You need to call the datatable fnDraw() function in the button click event:

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

This assumes that you have already assigned the datatable object to var oTable. Also you must have reset the search fields before calling fnDraw() otherwise you will just perform another search.

Answer 4

After a quick google search I found a function you could use the reset/reload the table. You can do the by using AJAX and the ajax.reload() function from the datatables plugin.

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

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

Documentation: datatables ajax.reload()