Question

我是使用DataTables Table插件进行jQuery的新手，并且能够从后端数据库中检索数据并成功地在网格中显示它。这是在$（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>

Answer 1

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

$('#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.");
     });

Answer 2

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

搜索

2 个答案: