爲什麼DataTables不能處理來自新的局部視圖的數據？

當我通過ajax（使用局部視圖）將新數據放到表中時。我有新的數據到表中，但DataTable選項（顯示條目，shearch，分頁）不適用於這些數據。這個選項仍然「看到」舊數據。如何使用新數據刷新數據表選項，或者如何以數據表正常工作的方式將新數據添加到表中？爲什麼DataTables不能處理來自新的局部視圖的數據？

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。對不起我的英語不好。

來源

2017-08-14 fnk

爲什麼你正在使用AJAX來加載數據到數據表？ –

Becouse我想重新加載只有這張表，休息頁與其他datagrids，表必須不改變。 – fnk

移動用於將Datatable加載到部分視圖的腳本，因爲文檔就緒事件將不起作用，因爲DOM尚未準備好。

添加以下代碼以局部視圖：

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

來源

2017-08-14 09:25:38

我試過了，桌子是「裸體」，沒有「數據表」 – fnk

您是否已將代碼移到部分視圖上方？ –

其他選項可以使用數據表的服務器端選項。（https://datatables.net/ examples/data_sources/server_side.html' –

爲什麼DataTables不能處理來自新的局部視圖的數據？

回答

相關問題