如何使用MVC中的ajax从服务器重新初始化dataTables

所以这里我有管理员菜单列表，在我们的下面我有上传新闻。 单击此特定菜单时，我将调用部分视图，如下所示。

$("#body_data").load("/Admin/GetDailyNews", function () { $("#dailyNews").dataTable({ "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], "columnDefs": [{ "targets": 3, "orderable": false }], "pagingType": "full_numbers", "oLanguage": { "sSearch": "" }, "deferRender": true }); } 

AdminController中的我的PartialViewResult如下：

 [HttpGet] public PartialViewResult GetDailyNews() { var context=new MyContext(); List model = new List(); List news = (from n in context.news where n.stdate >= System.DateTime.Now orderby n.stdate descending select n).ToList(); foreach (var NEWS in news) { model.Add(new AVmodel.NewsEventsViewModel() { EDate = NEWS.stdate, EDesc = NEWS.brief, EName = Convert.ToString(NEWS.name), NID = NEWS.nid }); } return PartialView("_UploadNews", model); } 

我的_UploadNews.cshtml如下所示

 @model IEnumerable  @foreach (var news in Model) {  } 
 
 
 
Event Date
 
Event Name
 
Detailed News
 
Actions
 
 
 
 
@news.EDate.Date.ToShortDateString()
 
@Convert.ToString(news.EName)
 
@Convert.ToString(news.EDesc)
 
   
 
  

所以到现在为止它是好的。 一切进展顺利，桌子只显示未来几天的新闻。 现在我有一个管理员选项可以从表格中获取整套新闻，包括过去几天。 所以我在部分视图中保留了一个复选框，如下所示，这是一个自举开关类型 ：

我为该特定复选框写了一个onswitchchange ，如下所示：

 $("[name='fetchNews-checkbox']").on('switchChange.bootstrapSwitch', function (event, state) { if (state) { fetchNews('all'); } else { fetchNews('upcoming'); } }); 

我的fetchNews函数如下：

 function fetchNews(context) { if(context!="") { $("#dailyNews").dataTable({ "sPaginationType": "full_numbers", "bProcessing": true, "bServerSide": true, "sAjaxSource": "/Admin/FetchNews" }); } } 

当这个函数被调用时，我得到一个警告说

DataTables警告：table id = dailyNews – 无法重新初始化DataTable。 有关此错误的更多信息，请参阅http://datatables.net/tn/3

我访问了上述链接，但无法理解任何内容。 任何人都可以让我知道， 如何调用控制器json方法并将新闻列表呈现到此表中？

Answer 1

错误消息http://datatables.net/tn/3准确地说明了问题。 您正在使用fetchNews()不同选项重新初始化表。

您需要先破坏表，请参阅http://datatables.net/manual/tech-notes/3#destroy 。 您可以使用$("#dailyNews").dataTable().fnDestroy() （DataTables 1.9.x）或$("#dailyNews").DataTable().destroy() （DataTables 1.10.x）。

 function fetchNews(context) { if(context!="") { // Destroy the table // Use $("#dailyNews").DataTable().destroy() for DataTables 1.10.x $("#dailyNews").dataTable().fnDestroy() $("#dailyNews").dataTable({ // ... skipped ... }); } } 

或者，如果您正在使用DataTables 1.10.x，则可以使用附加选项"destroy": true初始化新表"destroy": true ，请参阅下文。

 function fetchNews(context) { if(context!="") { $("#dailyNews").dataTable({ "destroy": true, // ... skipped ... }); } } 

Answer 2

经过大量研究后，这对我有用： – 首先检查dataTable是否存在，是否销毁dataTable然后重新创建它

 if ($.fn.DataTable.isDataTable("#mytable")) { $('#mytable').DataTable().clear().destroy(); } $("#mytable").dataTable({... }); 

Answer 3

Datatables有一个检索选项。 如果你的表在inicialization后收到其他内容你可以设置参数：retrieve：true，

您可以在此处观看文档： https ： //datatables.net/reference/option/retrieve

 $("#body_data").load("/Admin/GetDailyNews", function () { $("#dailyNews").dataTable({ retrieve: true, "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], "columnDefs": [{ "targets": 3, "orderable": false }], "pagingType": "full_numbers", "oLanguage": { "sSearch": "" }, "deferRender": true }); 

}