如何使用 MVC 中的 ajax 使用从服务器新获取的数据重新初始化数据表 [英] How to reinitialize dataTables with newly fetched data from server using ajax in MVC
问题描述
所以这里我有管理员菜单列表,在它们下面我有上传新闻.当这个特定的菜单被点击时,我会调用一个局部视图,如下所示.
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
});
}
我在 AdminController 中的 PartialViewResult 如下:
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);
}
我的_UploadNews.cshtml如下
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 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>
所以到现在为止都很好.一切进展顺利,表格只显示未来几天的新闻.现在我可以选择让管理员从表中获取整套新闻,包括过去几天.所以我在我的局部视图中保留了一个复选框,如下所示,这是一个引导开关类型:
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">
并且我为该特定复选框编写了一个 onswitchchange
,如下所示:
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');
}
});
和我的 fetchNews
函数如下:
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 警告:table id=dailyNews - 无法重新初始化数据表.有关此错误的更多信息,请参阅http://datatables.net/tn/3
DataTables warning: table id=dailyNews - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
我访问了上述链接,但无法理解任何内容.任何人都可以让我知道,如何调用控制器 json 方法并将新闻列表呈现到此表中?
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?
推荐答案
错误信息 http://datatables.net/tn/3 准确地说明了问题.您正在使用 fetchNews()
中的不同选项重新初始化表.
The error message http://datatables.net/tn/3 states the problem precisely. You're re-initializing the table with different options in fetchNews()
.
需要先销毁表,见http://datatables.net/manual/tech-notes/3#destroy.你可以用 $("#dailyNews").dataTable().fnDestroy()
(DataTables 1.9.x) 或 $("#dailyNews").DataTable().destroy()
(数据表 1.10.x).
You need to destroy the table first, see http://datatables.net/manual/tech-notes/3#destroy.
You can do that with $("#dailyNews").dataTable().fnDestroy()
(DataTables 1.9.x) or $("#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
初始化新表,见下文.
Alternatively, if you're using DataTables 1.10.x, you can initialize the new table with additional option "destroy": true
, see below.
function fetchNews(context)
{
if(context!="")
{
$("#dailyNews").dataTable({
"destroy": true,
// ... skipped ...
});
}
}
这篇关于如何使用 MVC 中的 ajax 使用从服务器新获取的数据重新初始化数据表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!