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

2021/01/11 06:31 · jquery ·  · 0评论

因此,这里有管理员菜单列表,在这些菜单下有上载新闻。单击此特定菜单后,我将称其为局部视图,如下所示。

$("#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>&nbsp; <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方法并将新闻列表呈现到此表中?

错误消息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 ...
        });
    }
}

经过大量研究后,这对我有用:-首先检查dataTable是否存在,是否破坏了dataTable,然后重新创建它

if ($.fn.DataTable.isDataTable("#mytable")) {
  $('#mytable').DataTable().clear().destroy();
}

$("#mytable").dataTable({...
                       
                });

数据表具有检索选项。如果您的表格在初始化后收到其他内容,则可以设置参数:retrieve: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
      });

}

$('#mytable')。DataTable()。destroy(); $('#mytable')。html('');

虽然上面的答案对待症状(“不能重新初始化”警告),他们没有解决问题的根源:你不得从jQuery的内部填充的DataTable $.load()/ $.ajax()/ $.get()/$.post()成功回调,因为它提出了造成异步的问题种种AJAX调用性质。

通过调用DataTables.destroy()方法,您可以使情况变得更糟,因为每次从服务器检索数据时,都不必要破坏并创建新的DataTable,这至少会浪费性能。

相反,您应该使用DataTablesajax选项,该选项在需要的地方和时间触发AJAX调用,使您可以充分利用DataTables API方法而不会影响性能,例如ajax.reload(),如果需要,可以重新获取数据在加载最新数据之前更改URL,您可以ajax.url().load()

OP的示例的完整实时演示可能看起来像这样简单:

经过大量研究,这对我有用:$('#userList')。DataTable()。clear()。destroy();

我可以每次通过提供destroy属性来重新初始化数据表,如下所示:

            .done(function(ret){
                $("#cloud").DataTable({
                   ordering : true,
                   pageLength : 20,
                   destroy: true,
                   data : loadData(ret)
                })
            });
本文地址:http://jquery.askforanswer.com/ruhezaimvczhongshiyongajaxcongfuwuqixinhuoqudeshujuzhongxinchushihuadatatables.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!