如何在没有页面刷新的情况下刷新jQuery DataTable?

时间:2017-07-17 07:43:03

标签: jquery datatables reset

我在我的数据表中使用了多列搜索功能,我还有一个重置按钮,可以清除所有搜索并获取DataTable到它的默认状态。

工作正常。

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

请帮忙。 提前谢谢。

以下是重置按钮的html:

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

以下是将表重置为原始状态

 oTable.fnDraw();

4 个答案:

答案 0 :(得分:1)

快速谷歌搜索后,我找到了一个功能,你可以使用重置/重新加载表。您可以使用AJAX和datatables插件中的ajax.reload()函数来完成。

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

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

文档:datatables ajax.reload()

答案 1 :(得分:0)

您需要在按钮单击事件中调用数据表fnDraw()函数:

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

这假设您已将datatable对象分配给var oTable。此外,您必须在调用fnDraw()之前重置搜索字段,否则您只需执行其他搜索。

答案 2 :(得分:0)

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

这是包含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>
}}

答案 3 :(得分:0)

您可以使用此代码:

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