搜索后重新填充数据表网格的示例

Example of Repopulating DataTables Grid After Searching

本文关键字：网格 数据表 填充 新填充 搜索      更新时间：2023-09-26

我是jQuery的DataTables表插件的新手，能够从后端数据库中检索数据并成功地将其显示在网格中。这是在$（document.ready（））过程中完成的。我创建了一个页面，它提供了一些搜索条件，当用户提交页面时，这些条件会重新填充表。有人能提供一个简单的例子来展示如何在提交后用表重新填充新结果吗？我也在使用MVC，这也是我第一次解决的问题，这可能是问题的一部分。

下面是我尝试过的jQuery代码，但它没有将结果绑定到已经存在的表。我也只在选项中指定了ajax源，认为表已经设置了其他选项，而ajax源就是所有需要更改的内容。

谢谢，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;
});

浏览器只显示ajax源的输出，如下所示。

｛"sCho"：null，"iTotalRecords"：94，"iTatalDisplayRecords":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>

在第二个例子中，它看起来不像是您更改了任何数据：

$('#SubmitForm').on('submit', function (e) { //use on if jQuery 1.7+
        table = $('#grid').DataTable();
        table.ajax.reload();
        return true;
});

提交时，您将重新加载表，然后发布表单。如果您要使用ajax源数据，请使用jquery发布数据，然后在成功后重新加载表：

$.ajax({
   url: url, type: 'POST',
   success: function() {
       table.ajax.reload();
   }
    }).fail(function() {
        alert("Sorry. Server unavailable.");
     });

事实证明，我在MVC、ajax和DataTables之间有很多东西需要学习。我最终使用了按钮点击按钮，而不是提交。结果很好。我不得不说，在花了这么多时间使用ASP之后，使用这种方法令人耳目一新。Net Web窗体。感谢所有提出建议的人。

相关文章：