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

Question

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

PS。当我把整格id="tabDiv"在parial然后再数据表不工作（我只有“裸”表，而数据表）

我的观点：

<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> 

我CONTROLER：

[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尚未准备好。

添加以下代码以局部视图：

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