如何在不刷新页面的情况下刷新 jQuery DataTable？

Question

我在我的数据表中使用了多列搜索功能，我还有一个重置按钮，用于清除所有搜索并将数据表恢复到默认状态。

效果很好。

但我想知道如何在不刷新页面的情况下重置数据表..??

请帮忙。 提前致谢。

以下是重置按钮的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();
});

这假定您已将数据表对象分配给 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();