因此,这里有管理员菜单列表,在这些菜单下有上载新闻。单击此特定菜单后,我将称其为局部视图,如下所示。
$("#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> <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>
所以到现在为止还不错。一切进展顺利,表格仅显示未来的新闻。现在,管理员可以选择从表格中获取整个新闻集,包括过去的日子。所以我在我的局部视图中保留了一个复选框,如下所示,它是一个 引导程序开关类型 :
<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为该特定复选框写了一个,如下所示:
onswitchchange
$("[name='fetchNews-checkbox']").on('switchChange.bootstrapSwitch', function (event, state) { if (state) { fetchNews('all'); } else { fetchNews('upcoming'); } });
我的fetchNews功能如下:
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方法并将新闻列表呈现到此表中?
错误消息http://datatables.net/tn/3准确说明了该问题。您正在使用中的其他选项重新初始化表格fetchNews()。
fetchNews()
您需要先销毁该表,请参阅http://datatables.net/manual/tech- notes/3#destroy。您可以使用$("#dailyNews").dataTable().fnDestroy()(DataTables 1.9.x)或$("#dailyNews").DataTable().destroy()(DataTables 1.10.x)进行此操作。
$("#dailyNews").dataTable().fnDestroy()
$("#dailyNews").DataTable().destroy()
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 ... }); } }