我正在使用WebGrid和jQuery DataTable，但问题是并非所有jQuery DataTable的功能都能正常运行。
请帮忙。谢谢:)）
以下是DataTable的脚本：
$(document).ready(function () {
var table = $('#webgrid').DataTable({
"dom": "lfrti", //to disable paging dropdown
"bPaginate": false, //to disable pagination
"bInfo": false, //to disable showing entries
});
$('#webgrid tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = $('#webgrid').DataTable();
// Apply the search
table.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});});
以下代码适用于WebGrid：
@using (Html.BeginForm("Persons", "Welcome", FormMethod.Get, new {@class = "Search-form"}))
{
<div id="DivGrid">
@{
var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10,
defaultSort: "Employee ID", columnNames: new[] { "Employee_ID",
"First_Name", "Last_Name", "Date_Of_Birth" });
if (Model.Count() > 0)
{
<div class="moveRight"><strong> @ViewBag.SearchParameter</strong> | @grid.TotalRowCount @Html.Label("Record(s) found")</div>
@grid.GetHtml(tableStyle: "PGrid", headerStyle: "Header", alternatingRowStyle: "altRow", htmlAttributes: new { id = "webgrid" }, columns: grid.Columns(
grid.Column("Employee_ID", "Employee ID " + MyFormAppln.Models.helpers.SortDirection(null, ref grid, "Employee ID"),
format: @<text> <span class="display-mode grid-filter-btn">@item.Employee_ID </span>
<label id="EmployeeID" class="edit-mode grid-filter-btn">@item.Employee_ID</label> </text>, style: "col2Width"),
grid.Column("First_Name", "First Name " + MyFormAppln.Models.helpers.SortDirection(null, ref grid, "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" data-col="firstname" /></text>, style: "col2Width"),
grid.Column("Last_Name", "Last Name " + MyFormAppln.Models.helpers.SortDirection(null, ref grid, "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" data-col="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("Date_Of_Birth", "Date Of Birth", format: item => ((item.Date_Of_Birth == null) ? "" : item.Date_Of_Birth.ToString("MM/dd/yyyy")) ),
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>)));
}
else
{
<hr />@Html.Label("No, Record(s) not found")<<hr />
}
}
</div>}
答案 0 :(得分：0)
搜索功能仅限于当前页面 您的webgrid已对您的数据表进行了分页 它只显示一个页面，其中包含10条记录（总记录数：50） 您的webgrid每页有10行属性 多列搜索无法正常工作或不可见。 https://datatables.net/examples/api/multi_filter.html
尝试
var grid = new WebGrid(source: Model, canPage: false,
答案 1 :(得分：0)
DataTable脚本代码：
var oTable;
var asInitVals = new Array();
$(document).ready(function () {
oTable = $('#webgrid').dataTable({
"oLanguage": {
"sSearch": "Search all columns:"
}
});
$("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代码：
@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 grid-filter-btn">@item.Employee_ID </span>
<label id="EmployeeID" class="edit-mode grid-filter-btn">@item.Employee_ID</label> </text>, style: "col2Width"),
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" data-col="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" data-col="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>
<th class="txtBoxWidth">
<input class='txtBox1 ' placeholder='Employee Id' />
</th>
<th class="txtBoxWidth">
<input class='txtBox2 ' placeholder='First Name' />
</th>
<th class="txtBoxWidth">
<input class='txtBox3 ' placeholder='Last Name' />
</th>
<th class="txtBoxWidth">
<input class='txtBox4 ' placeholder='Date of Birth' />
</th>
<th>
</th>
</tr>
</tfoot>
</table>