ASP.NET MVC 部分视图 jquery 数据表

Question

我对 mvc 中的 jQuery Datatables 插件有疑问。

我有一个带有 ajax 形式的视图，它可以在 sumbit 上加载带有表格的部分视图。

查看

...
    @using (Ajax.BeginForm("MyAction", "MyController", new AjaxOptions { UpdateTargetId = "myList" }, new { @id = "searchForm", @class = "form-horizontal" }))
    {
                                // some html  
    }
    <div id="myList">

    </div>

带表格的局部视图

@model IEnumerable<Item>
<table id="productsTable">
    <thead>
    <tr>
        <th>Name</th>
        <th>Description</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(x => item.Name)</td>
            <td>@Html.DisplayFor(x => item.Description)</td>
            <td>
                <div>
                    <a href="@Url.Action("Edit", "MyController", new {id =            item.Id})">
                    </a>
                    <a href="@Url.Action("Delete", "MyController", new {id = item.Id})" >
                    </a>
                </div>
            </td>
        </tr>
    }
    </tbody>
</table>

问题是如果我放脚本

$(document).ready(function() {
   $('#productsTable').DataTable();
});

在主视图中它将不起作用，因为部分视图由 ajax 加载。如果我将此脚本放在部分视图中，它将延迟工作：首先用户会看到简单的 html 表，然后它将被转换为数据表。

有什么方法可以用数据表更正加载部分视图？ 感谢您的建议。

Answer 1

您不能在服务器上执行任何操作来“预加载”数据表，因为它只能在客户端上运行。要运行DataTable()，浏览器需要同时加载jQuery和HTML才能转换它，这就是为什么会有丑陋的“眨眼”。

我建议您使用 CSS position:absolute; 和 visibility:hidden;（而不是 display:none; 将其加载（如果您愿意，使用 Ajax）将其加载到一个 div 中，并将其放置在屏幕外的某个位置（例如使用 left: -3000em; 或类似的）。之后一切都已加载，DataTable() 已运行，您可以使用 JS 将 div 移动到应该在的位置，然后将 position 和 visibility 切换回正常状态。

如果您愿意，您甚至可以使用甜美的淡入效果来做到这一点。 :)

Answer 2

$(document).ready(function() {
   $('#productsTable').DataTable();
});

你应该把这段代码放在成功的ajax调用里面。 我认为这可能会解决您的问题:)