为什么DataTables无法使用新的部分视图中的数据? [英] Why DataTables don't work with data from new partial view?

问题描述

当我通过ajax将新数据放入表中时(使用局部视图).我在表中添加了新数据，但是DataTable选项(显示条目，搜索列表，分页)不适用于此数据.此选项仍然看到"旧数据. 我如何用新数据刷新datatables选项，或者如何以使datatable正常工作的方式将新数据放入表中?

When I put new data to table by ajax (using partial view). I have new data into table, but DataTable options (show entries, shearch, pagination) is don't work with this data. This options still "see" old data. How I can refresh datatables options with new data, or how i can put new data to table in such a way that datatable work correctly ??

PS.当我将整个div id="tabDiv"放在parial中时，则DataTables不起作用(我只有裸"表，而没有DataTables)

PS. When i put whole div id="tabDiv" in parial then then DataTables dont work (I have only "naked" table without 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.对不起，我的英语.

PS2. Sorry for my english.

推荐答案

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

Move your script used to load Datatable to your partial view as document ready event will not work as DOM is not prepare yet.

将以下代码添加到局部视图:

Add below code to partial view:

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

这篇关于为什么DataTables无法使用新的部分视图中的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！