Как повторно инициализировать dataTables с новыми данными с сервера с помощью ajax в MVC

Question

Итак, у меня есть список меню для администратора и под ними. У меня есть загрузка новостей. Когда это конкретное меню нажато, я вызываю частичное представление, как показано ниже.

$("#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 
      }); 
} 

Мой PartialViewResult в AdminController, как показано ниже:

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

Так до сих пор это хорошо. Все идет хорошо, и в таблице отображаются только те новости, которые будут в будущем. Теперь у меня есть возможность для администратора получать весь набор новостей из таблицы, включая прошлые дни. Так что я держал флажок в моем PartialView, как показано ниже, который является самозагрузки переключатель типа:

<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: таблица 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, смотрите ниже.

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({... 
 
         
 
       });