Question

当我通过ajax将新数据放入表时（使用局部视图）。我有新的数据到表中，但DataTable选项（显示条目，shearch，分页）不适用于此数据。这个选项仍然“看到”旧数据。如何使用新数据刷新数据表选项，或者如何以数据表正常工作的方式将新数据放入表中？

PS。当我将整个div id="tabDiv"置于parial中然后DataTables不起作用（我只有“裸”表没有DataTables）

我的观点：

<div id="tabDiv">
    <br />
    <table class="table" id="tab">
        <thead>
            <tr>
                <th>Kody</th>
                <th>Nadruk</th>
                <th>Data Nadruku</th>
                <th>Maszyna</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.actualCodesM)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Code)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Used)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.DateUsed)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Machine)
                    </td>
                    <td>
                        @Html.ActionLink("Edytuj", "Edit", new { id = item.Id }, new { @class = "btn btn-info" })
                        @Html.ActionLink("Usuń", "Delete", new { id = item.Id }, new { @class = "btn btn-danger" })
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

我的脚本：

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


$('#btn').on('click', function () 
{

    var codes = $('#codesCounter').val();
    var machine = $('#machineList').val();

    $.ajax({
        url: '/ActualCodes/IndexTablePartial',
        type: 'POST',
        dataType: 'html',
        cache: false,
        contentType: 'application/json',
        data: JSON.stringify({ codesCount: codes, machine: machine }),
        //beforeSend: loadingShow,
    })
        .success(function (partialViewResult) {
            $("#tab").html(partialViewResult);

        })

        .error(function (partialViewResult) {
            alert('Error.');
        });
});

我的部分：

<table class="table" id="tab">
<thead>
    <tr>
        <th>Kody</th>
        <th>Nadruk</th>
        <th>Data Nadruku</th>
        <th>Maszyna</th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model.actualCodesM)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Code)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Used)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateUsed)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Machine)
            </td>
            <td>
                @Html.ActionLink("Edytuj", "Edit", new { id = item.Id }, new { @class = "btn btn-info" })
                @Html.ActionLink("Usuń", "Delete", new { id = item.Id }, new { @class = "btn btn-danger" })
            </td>
        </tr>
    }
</tbody>

我的控制器：

[HttpPost]
public ActionResult IndexTablePartial()
{
    var actualCodesModel = mapper.Map(dbE.ActualCodes.Take(1000).ToList());

    aCIIndexModel.actualCodesM = actualCodesModel;

    return PartialView("IndexTablePartial", aCIIndexModel);
}

PS2。抱歉我的英文。

Answer 1

移动用于将Datatable加载到部分视图的脚本，因为文档就绪事件将无法正常工作，因为DOM尚未准备好。

将以下代码添加到部分视图中：

Answer 2

我还面临着同样的问题，即在添加@Manprit建议的代码后，数据表仍然“裸”了。但是我意识到代码必须如下所示

<script type="text/javascript">
$(document).ready(function () {
    $('#datatable').DataTable();
});</script>

Answer 3

<script type="text/javascript">
    $("document").ready(function () {
        $('#MyTable1').DataTable();
    });
</script>

Answer 4

我知道这是旧帖子，但是我只是遇到了类似的问题，这就是我的解决方法：

首先，我从nuget软件包管理器中下载了datatables插件。

 @{
        Layout = null;
    }
    //**this is what solved my issue**
    @Scripts.Render("~/Scripts/DataTables/jquery.dataTables.min.js")
    @Styles.Render("~/Content/DataTables/css/jquery.dataTables.min.css")
    //////
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    //Your Table
    </body>
    </html>
    
    <script>
        $(document).ready(function () {
            $('#example').DataTable({
                
            });
        });
    </script>

我希望这对某些人有帮助。

为什么DataTables不能处理来自新部分视图的数据？

4 个答案: