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表，然后它将转换为datatable。

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

Answer 1

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

我建议您将其加载（如果需要，使用Ajax）到具有CSS position:absolute;的div中position:absolute; 和visibility:hidden; （不display:none;然后将其放置在屏幕外的某个位置（例如， left: -3000em;或类似位置）。加载left: -3000em;所有内容并运行DataTable() ，您可以使用JS将div移至应位于的位置并切换position和visibility恢复正常。

如果需要，您甚至可以使用甜美的淡入效果进行此操作。 :)

Answer 2

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

您应该将这段代码放在ajax调用成功的内部。 我认为这可以解决您的问题:)