我在我的数据表中使用了多列搜索功能,我还有一个重置按钮,可以清除所有搜索并获取DataTable到它的默认状态。
工作正常。
但我想知道如何在不刷新页面的情况下重置数据表.. ??
请帮忙。 提前谢谢。
以下是重置按钮的html:
<button class="Reset form-control" id="reset">Reset table to Original State</button>
以下是将表重置为原始状态
oTable.fnDraw();
答案 0 :(得分:1)
快速谷歌搜索后,我找到了一个功能,你可以使用重置/重新加载表。您可以使用AJAX和datatables插件中的ajax.reload()函数来完成。
var table = $('#example').DataTable();
table.ajax.reload( function ( json ) {
$('#myInput').val( json.lastInput );
} );
答案 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();