javascript - 如何在 MVC 中使用 ajax 使用新从服务器获取的数据重新初始化 dataTables

Question

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

$("#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<AVmodel.NewsEventsViewModel> model = new List<AVmodel.NewsEventsViewModel>();
     List<news> 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<MCB.Models.BusinessObjects.AVmodel.NewsEventsViewModel>
<table id="dailyNews" cellspacing="0" width="100%" class="table table-condensed table-hover table-responsive table-bordered order-column">
     <thead>
           <tr>
               <th>Event Date</th>
               <th>Event Name</th>
               <th>Detailed News</th>
               <th class="disabled">Actions</th>
          </tr>
     </thead>
     <tbody>
          @foreach (var news in Model)
          {
               <tr data-row="row_@news.NID">
                   <td>@news.EDate.Date.ToShortDateString()</td>
                   <td>@Convert.ToString(news.EName)</td>
                   <td>@Convert.ToString(news.EDesc)</td>
                   <td><button class="btn btn-primary" data-target="#editAddNews" data-toggle="modal" onclick="javascript: EditNews(this);" data-info="data_@news.NID"><span class="fa fa-edit"></span> </button>&nbsp; <button class="btn btn-danger" onclick="javascript: DeleteNews(this);" data-info="data_@news.NID"><span class="fa fa-trash-o"></span></button></td>
               </tr>
          }
     </tbody>
</table>

所以到目前为止一切都很好。一切都很顺利，表格只显示 future 几天的新闻。现在，我可以选择让管理员从表中获取整组新闻，包括过去的几天。因此，我在局部 View 中保留了一个复选框，如下所示，它是引导开关类型:

<input type="checkbox" name="fetchNews-checkbox" data-on-text="All News" data-off-text="Upcoming News" data-on-color="primary" data-off-color="default" data-label-width="100px" data-label-text="News details">

我已经为该特定复选框编写了一个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 warning: table id=dailyNews - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

我访问了上述链接，但无法理解任何内容。谁能告诉我，如何调用 Controller 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 初始化新表，请参见下文。

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