title: How to reinitialize dataTables with newly fetched data from server using ajax in MVC
body: <p>So here I have list of menus for admin and under them I have Upload news. When this particular menu is clicked, I call a partial view as below.</p>
  
  <pre><code>$("#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
            });
  }
  </code></pre>
  
  <p>My PartialViewResult in AdminController is as below:</p>
  
  <pre><code>[HttpGet]
  public PartialViewResult GetDailyNews()
  {
       var context=new MyContext();
       List&lt;AVmodel.NewsEventsViewModel&gt; model = new List&lt;AVmodel.NewsEventsViewModel&gt;();
       List&lt;news&gt; news = (from n in context.news where n.stdate &gt;= 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);
  }
  </code></pre>
  
  <p>My _UploadNews.cshtml is as below</p>
  
  <pre><code>@model IEnumerable&lt;MCB.Models.BusinessObjects.AVmodel.NewsEventsViewModel&gt;
  &lt;table id="dailyNews" cellspacing="0" width="100%" class="table table-condensed table-hover table-responsive table-bordered order-column"&gt;
       &lt;thead&gt;
             &lt;tr&gt;
                 &lt;th&gt;Event Date&lt;/th&gt;
                 &lt;th&gt;Event Name&lt;/th&gt;
                 &lt;th&gt;Detailed News&lt;/th&gt;
                 &lt;th class="disabled"&gt;Actions&lt;/th&gt;
            &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
            @foreach (var news in Model)
            {
                 &lt;tr data-row="row_@news.NID"&gt;
                     &lt;td&gt;@news.EDate.Date.ToShortDateString()&lt;/td&gt;
                     &lt;td&gt;@Convert.ToString(news.EName)&lt;/td&gt;
                     &lt;td&gt;@Convert.ToString(news.EDesc)&lt;/td&gt;
                     &lt;td&gt;&lt;button class="btn btn-primary" data-target="#editAddNews" data-toggle="modal" onclick="javascript: EditNews(this);" data-info="data_@news.NID"&gt;&lt;span class="fa fa-edit"&gt;&lt;/span&gt; &lt;/button&gt;&amp;nbsp; &lt;button class="btn btn-danger" onclick="javascript: DeleteNews(this);" data-info="data_@news.NID"&gt;&lt;span class="fa fa-trash-o"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/td&gt;
                 &lt;/tr&gt;
            }
       &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>So till now it's good. Everything is going well and the table displays only  those news which are of future days. Now I have a option for admin to fetch the whole set of news from table, including past days. So I have kept a checkbox in my partialview as below which is a <strong>bootstrap switch type</strong>:</p>
  
  <pre><code>&lt;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"&gt;
  </code></pre>
  
  <p>and I have written a <code>onswitchchange</code> for that particular checkbox as below:</p>
  
  <pre><code>$("[name='fetchNews-checkbox']").on('switchChange.bootstrapSwitch', function (event, state) {
       if (state) 
       {
             fetchNews('all');
       }
       else 
       {
             fetchNews('upcoming');
       }
  });
  </code></pre>
  
  <p>and my <code>fetchNews</code> function is as below:</p>
  
  <pre><code>function fetchNews(context)
  {
      if(context!="")
      {
          $("#dailyNews").dataTable({
              "sPaginationType": "full_numbers",
              "bProcessing": true,
              "bServerSide": true,
              "sAjaxSource": "/Admin/FetchNews"
          });
      }
  }
  </code></pre>
  
  <p>when this function is called I am getting an alert which says </p>
  
  <blockquote>
    <p>DataTables warning: table id=dailyNews - Cannot reinitialise
    DataTable. For more information about this error, please see
    <a href="http://datatables.net/tn/3" rel="noreferrer">http://datatables.net/tn/3</a></p>
  </blockquote>
  
  <p>I visited the above said link but was not able to understand anything. Can anyone please let me know, <strong>how to call a controller json method and render list of news into this Table?</strong></p>