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.
$(#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
});
}
My PartialViewResult in AdminController is as below:
[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);
}
My _UploadNews.cshtml is as below
@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 [email protected]>
<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); [email protected]><span class=fa fa-edit></span> </button> <button class=btn btn-danger onclick=javascript: DeleteNews(this); [email protected]><span class=fa fa-trash-o></span></button></td>
</tr>
}
</tbody>
</table>
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 bootstrap switch type:
<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>
and I have written a onswitchchange for that particular checkbox as below:
$([name='fetchNews-checkbox']).on('switchChange.bootstrapSwitch', function (event, state) {
if (state)
{
fetchNews('all');
}
else
{
fetchNews('upcoming');
}
});
and my fetchNews function is as below:
function fetchNews(context)
{
if(context!=)
{
$(#dailyNews).dataTable({
sPaginationType: full_numbers,
bProcessing: true,
bServerSide: true,
sAjaxSource: /Admin/FetchNews
});
}
}
when this function is called I am getting an alert which says
DataTables warning: table id=dailyNews - Cannot reinitialise
DataTable. For more information about this error, please see
http://datatables.net/tn/3
I visited the above said link but was not able to understand anything. Can anyone please let me know, how to call a controller json method and render list of news into this Table?
