Ich bin neu in der Verwendung des DataTables Table-Plug-Ins für jQuery und konnte Daten aus einer Back-End-Datenbank abrufen und erfolgreich in einem Grid anzeigen. Dies geschieht während $ (document.ready()). Ich habe eine Seite erstellt, die einige Suchkriterien enthält, die die Tabelle neu füllen würden, wenn der Benutzer die Seite übergibt. Kann jemand ein einfaches Beispiel geben, das zeigt, wie die neuen Ergebnisse mit der Tabelle als Ergebnis einer Submission neu gefüllt werden? Ich benutze auch MVC, die ich auch zum ersten Mal in Angriff nehme, was ein Teil des Problems sein könnte.Beispiel für das Auslagern von DataTables-Tabellen nach der Suche
Unten ist der jQuery-Code, den ich ausprobiert habe, aber er bindet die Ergebnisse nicht an die bereits vorhandene Tabelle. Ich habe die Ajax-Quelle auch nur in den Optionen angegeben, die denken, dass die Tabelle bereits die anderen Optionen gesetzt hat und die Ajax-Quelle alles ist, was geändert werden muss.
Danke, Tom
$('#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;
});
Der Browser zeigt nur die Ausgabe der Ajax-Quelle, wie unten gezeigt.
{ "sEcho": null, "iTotalRecords": 94 "iTotalDisplayRecords": 94 "aaData": []}
Im Folgenden sind Auszüge meiner Ansichten, die zeigen, wie ich bin Verwenden der DataTable.
Dies funktioniert - beachten Sie, dass die DataTable gerendert und beim Laden der Seite über document.ready aufgefüllt wird.
<!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>
Dies ist die zweite Ansicht, die nicht funktioniert. Hier versuche ich, Suchkriterien zu übernehmen, die Tabelle mit den Suchergebnissen zu übermitteln und zu füllen. Sowohl die Ajax-Aufrufe aus dem obigen Arbeitsbeispiel als auch das nicht arbeitende Beispiel geben die gleichen Ergebnisse aus dem Ajax-Aufruf zurück. Ich habe auch das Beispiel zum Laden von Seiten in diese Ansicht aufgenommen und dachte mir, dass dies helfen könnte, dass die DataTable bereits initialisiert wurde, wenn die Suche abgeschlossen ist und sie neu gefüllt werden soll. Danke für Ihre Hilfe!
@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>
Ich versuchte dies, aber das gleiche Ergebnis zu erhalten. Ich habe überprüft, dass die Ergebnisse die gleichen sind, wenn ich vom Ajax-Aufruf für die Arbeits- und Nicht-Arbeitsszenarien zurückkomme. Hier ist das Codeschnipsel, das ich verwendet habe: table = $ ('# grid'). DataTable(); table.ajax.reload(); –
Was meinen Sie mit Arbeits- und Nicht-Arbeitsszenarien? Wie übermitteln Sie die Daten? Wie erwarten Sie, dass es geändert wird? –
Ich habe Code für die Arbeit und nicht-arbeiten Ansichten oben in der Hauptpost hinzugefügt. Danke für Ihre Hilfe. –