【发布时间】：2016-07-26 14:28:47
【问题描述】：
我是使用 jQuery 的 DataTables Table 插件的新手，并且能够从后端数据库中检索数据并成功地将其显示在网格中。这是在 $(document.ready()) 期间完成的。我创建了一个页面，其中提供了一些搜索条件，当用户提交页面时，这些条件将重新填充表格。有人可以提供一个简单的示例，说明如何在提交后使用表格重新填充新结果？我也在使用 MVC，我也是第一次解决这可能是问题的一部分。
下面是我尝试过的 jQuery 代码，但它没有将结果绑定到已经存在的表。我还仅在选项中指定了 ajax 源，认为该表已经设置了其他选项，并且 ajax 源是所有需要更改的。
谢谢， 汤姆
$('#SubmitForm').on('submit', function (e) {
table = $('#grid').DataTable();
table.sAjaxSource = "GetEmails";
table.bServerSide = true;
table.bProcessing = true;
table.aoColumns = [
{ "sName": "Id" },
{ "sName": "Email" },
{ "sName": "Reason" },
{ "sName": "Name" },
{ "sName": "Organization" },
{ "sName": "Email_Verified_Date" }
];
return true;
});
浏览器只显示ajax源的输出，如下图。
{"sEcho":null,"iTotalRecords":94,"iTotalDisplayRecords":94,"aaData":[]}
以下是我的观点摘录，展示了我如何使用 DataTable。
这可行 - 请注意 DataTable 在页面加载期间通过 document.ready 呈现和填充。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>How to use jQuery Grid with ASP.NET MVC</title>
<script type="text/javascript">
$(document).ready(function () {
var oTable = $('#grid').dataTable({
"bServerSide": true,
"sAjaxSource": "home/GetEmails1",
"bProcessing": true,
"aoColumns": [
{ "sName": "Id" },
{"sName": "Email"},
{"sName": "Reason"},
{ "sName": "Name" },
{ "sName": "Organization" },
{ "sName": "Email_Verified_Date" }
]
});
});
</script>
</head>
<body>
<div class="table-responsive">
<table id="grid">
<thead>
<tr>
<th>Id</th>
<th>Email</th>
<th>Reason</th>
<th>Name</th>
<th>Organization</th>
<th>Email Verified Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
这是第二个不起作用的视图。在这里，我尝试采用搜索条件，提交并使用搜索结果填充表格。来自上述工作示例的 ajax 调用和此处的非工作示例都从 ajax 调用返回相同的结果。我在此视图中包含了页面加载示例，并认为这可能有助于 DataTable 在搜索完成并重新填充时已经初始化。感谢您的帮助！
@model MvcMovie.Models.ACORD360VerifiedEmail
@{
ViewBag.Title = "Home Page";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Search Page</title>
<script type="text/javascript">
$(document).ready(function () {
var oTable = $('#grid').dataTable({
"bServerSide": true,
//"sAjaxSource": "GetEmails",
"sAjaxSource": "GetEmails",
"bProcessing": true,
"aoColumns": [
{ "sName": "Id" },
{ "sName": "Email" },
{ "sName": "Reason" },
{ "sName": "Name" },
{ "sName": "Organization" },
{ "sName": "Email_Verified_Date" }
]
});
$('#SubmitForm').on('submit', function (e) { //use on if jQuery 1.7+
table = $('#grid').DataTable();
table.ajax.reload();
return true;
});
})
</script>
</head>
<body>
@using (Html.BeginForm("GetEmails", "ACORD360VerifiedEmail", FormMethod.Post, new { id = "SubmitForm" }))
{
<div class="panel-body">
<h2>Lyris - ACORD360 Integration</h2>
<p class="lead">This allows you to modify Lyris and ACORD360 email data.</p>
</div>
<div class="row">
<div class="col-md-3">
@Html.LabelFor(m => m.EmailVerifiedStartDate)
@Html.TextBoxFor(m => m.EmailVerifiedStartDate,
new { @class = "form-control date-picker", placeholder = "Enter date here", id = "EmailVerifiedStartDate" })
</div>
<div class="col-md-3">
@Html.LabelFor(m => m.EmailVerifiedEndDate)
@Html.TextBoxFor(m => m.EmailVerifiedEndDate, new { @class = "form-control date-picker", placeholder = "Enter date here", id = "EmailVerifiedEndDate" })
</div>
<div class="col-md-3">
@Html.LabelFor(m => m.OrganizationName)
@Html.TextBoxFor(m => m.OrganizationName)
</div>
<div>
<input type="submit" value="Search" />
</div>
</div>
<br /><br /><br />
<div class="table-responsive">
<table id="grid">
<thead>
<tr>
<th>Id</th>
<th>Email</th>
<th>Reason</th>
<th>Name</th>
<th>Organization</th>
<th>Email Verified Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="row">
<div class="col-md-12">
<br /><br />
<label id="Error"></label>
<label id="Info"></label>
</div>
</div>
}
</body>
</html>
【问题讨论】：
标签： javascript jquery ajax datatables