如何使用MVC中的ajax重新从服务器获取数据来重新初始化dataTables
所以这里我有管理菜单的列表，在它们下面我有上传新闻。当单击此特定菜单时，我将调用部分视图，如下所示。
$("#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 in 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> <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，如下所示：
$("[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方法并将新闻列表呈现到这个表中？
回答 8
Stack Overflow用户
发布于 2015-03-21 13:58:29
错误消息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 ...
});
}
}Stack Overflow用户
发布于 2017-02-07 11:26:30
在我做了大量的研究之后，：-首先检查dataTable是否存在，如果确实破坏了dataTable，然后再重新创建它。
if ($.fn.DataTable.isDataTable("#mytable")) {
$('#mytable').DataTable().clear().destroy();
}
$("#mytable").dataTable({...
});
Stack Overflow用户
发布于 2018-08-27 18:32:19
数据表有一个检索选项。如果您的表在初始化后接收其他内容，则可以设置参数:检索: true，
您可以在这里查看文档：https://datatables.net/reference/option/retrieve
$("#body_data").load("/Admin/GetDailyNews", function () {
$("#dailyNews").dataTable({
retrieve: true,
"lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"columnDefs": [{ "targets": 3, "orderable": false }],
"pagingType": "full_numbers",
"oLanguage": { "sSearch": "" },
"deferRender": true
});}
https://stackoverflow.com/questions/29150480
复制相似问题
腾讯云开发者
