私は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"：ヌル、 "iTotalRecords"：94、 "iTotalDisplayRecordsが"：94、 "aaData"：[]}以下
は、私がどのように表示され、私の意見の抜粋ですDataTableを使用します。
この動作は、document.readyを介してページロード中にDataTableがレンダリングされ、読み込まれることに注意してください。
<!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>
これは動作しない2番目のビューです。ここでは、検索条件を取って、テーブルに検索結果を入力して入力しようとしています。上の動作例のajax呼び出しとここで動作していない例は、ajax呼び出しと同じ結果を返します。このビューにページ読み込みのサンプルを含めて、検索が完了して再読み込みされるときにDataTableが既に初期化されるのを助けるかもしれないと考えています。ご協力いただきありがとうございます！
2番目の例では@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>
私はこれを試しましたが、同じ結果が得られました。私は、現実のシナリオと非実際のシナリオの両方についてajax呼び出しから戻るときの結果が同じであることを確認しました。 使用したコードのスニペットを次に示します。 table = $（ '＃grid'）。DataTable（）; table.ajax.reload（）; –
勤務と非勤務のシナリオはどういう意味ですか？どのようにデータを提出していますか？どのようにそれが変更されることを期待していますか？ –
メインポストに上記の作業用と非作業用の両方のコードを追加しました。ご協力いただきありがとうございます。 –