Javascript 如何在MVC中使用ajax使用新从服务器获取的数据重新初始化数据表

所以这里我有一个管理员菜单列表，在它们下面我上传了新闻。单击此特定菜单时，我调用局部视图，如下所示

$("#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);
}

$("[name='fetchNews-checkbox']").on('switchChange.bootstrapSwitch', function (event, state) {
     if (state) 
     {
           fetchNews('all');
     }
     else 
     {
           fetchNews('upcoming');
     }
});

function fetchNews(context)
{
    if(context!="")
    {
        $("#dailyNews").dataTable({
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "/Admin/FetchNews"
        });
    }
}

我的

fetchNews

函数如下：

[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);
}

$("[name='fetchNews-checkbox']").on('switchChange.bootstrapSwitch', function (event, state) {
     if (state) 
     {
           fetchNews('all');
     }
     else 
     {
           fetchNews('upcoming');
     }
});

function fetchNews(context)
{
    if(context!="")
    {
        $("#dailyNews").dataTable({
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "/Admin/FetchNews"
        });
    }
}

当这个函数被调用时，我收到一个警告，上面写着

DataTables警告：表id=dailyNews-无法重新初始化 数据表。有关此错误的详细信息，请参阅

我访问了上述链接，但什么都不懂。谁能告诉我，如何调用控制器json方法并将新闻列表呈现到此表中？

错误消息准确地说明了问题。您正在使用

fetchNews（）

中的不同选项初始化表

您需要先销毁表，请参见。 您可以使用

$（“#dailyNews”）.dataTable（）.fndrostroy（）

（DataTables 1.9.x）或

$（“#dailyNews”）.dataTable（）.destroy（）

（DataTables 1.10.x）来实现这一点

或者，如果您使用的是DataTables 1.10.x，则可以使用附加选项

“destroy”：true来初始化新表，请参见下文

function fetchNews(context)
{
     if(context!="")
     {
        $("#dailyNews").dataTable({
            "destroy": true,
            // ... skipped ...
        });
    }
}

经过大量研究后，这对我来说很有效。：-首先检查dataTable是否存在，
如果确实销毁了数据表，然后重新创建它
if（$.fn.DataTable.isDataTable（“#mytable”））{
$（'#mytable'）.DataTable（）.clear（）.destroy（）；
}
$（“#mytable”）.dataTable（{。。。
});Datatables有一个检索选项。如果表在初始化后接收到其他内容，则可以设置参数：retrieve:true

您可以在此处查看文档：

}
$（'#mytable'）.DataTable（）.destroy（）；
$（'#mytable'）.html（''）
 虽然上述答案处理了症状（“无法重新初始化”警告），但它们并没有解决问题的根本原因：您不能从jQuery
$.load（）
/
$.ajax（）
/
$.get（）
/
$.post（）
成功回调中填充数据表，因为它引发了由异步AJAX调用性质引起的各种问题

通过调用DataTables
.destroy（）
方法，您可能会使事情变得更糟，因为每次从服务器检索数据时，您都会不必要地销毁并重新创建数据表，这至少是对性能的浪费

相反，您应该使用DataTables选项，该选项在必要时在任何地方触发AJAX调用，允许您充分受益于DataTables API方法，而不会影响性能，例如，您只需重新获取数据，如果您需要在加载最新数据之前更改URL，您就可以这样做

OP示例的完整现场演示可能看起来很简单：


//初始化数据表
const dataTable=$（'#newsTable'）。dataTable({
//指定AJAX源、参数和响应源
阿贾克斯：{
网址：'https://newsapi.org/v2/everything',
数据：（）=>({
q:（$（'input[name=“subject”]：checked'）.val（）| |'javascript'），
语言:"en",，
apiKey:'699BA21673CD45ABA406B1984B480 B60'
}),
dataSrc:“文章”
},
//设置表列
栏目：[
{title:'Source'，data:'Source.name'}，
{title:'title'，data:'title'}，
{标题：“内容”，数据：“内容”}
]
});
//使用新主题重新获取触发器表数据
$（'input[name=“subject”]”）。on（'change'，（）=>dataTable.ajax.reload（））

选择主题：
python
javascript
经过大量研究，这对我来说很有效：
$（'#userList'）.DataTable（）.clear（）.destroy（）
 我可以通过提供destroy属性，每次重新初始化数据表，如下所示：

            .done(function(ret){
                $("#cloud").DataTable({
                   ordering : true,
                   pageLength : 20,
                   destroy: true,
                   data : loadData(ret)
                })
            });

这对我不起作用我的datatable版本是1.9.4我无法在一个小时内重新初始化它你节省了我的时间兄弟。非常感谢。这是datatable添加的新选项吗？如果是，请附加源以及datatables版本：）这将有助于其他人。请考虑为您的代码添加解释。
            .done(function(ret){
                $("#cloud").DataTable({
                   ordering : true,
                   pageLength : 20,
                   destroy: true,
                   data : loadData(ret)
                })
            });