web-dev-qa-db-ja.com

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

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="[email protected]">
                   <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="[email protected]"><span class="fa fa-edit"></span> </button>&nbsp; <button class="btn btn-danger" onclick="javascript: DeleteNews(this);" data-info="[email protected]"><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/ をご覧ください。

上記のリンクにアクセスしましたが、何も理解できませんでした。誰でも私に知らせてください、コントローラーのjsonメソッドを呼び出してニュースのリストをこのテーブルにレンダリングする方法は？

javascriptjqueryajaxasp.net-mvcdatatables
17
Guruprasad Rao

エラーメッセージ http://datatables.net/tn/ は、問題を正確に示しています。 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 ...
        });
    }
}
61
Gyrocode.com

これは多くの研究の後に私のために働いた：-最初にdataTableが存在するかどうかを確認し、dataTableを破壊してから再作成する場合

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

$("#mytable").dataTable({...
                       
                });
40
Ravi.Dudi

Datatablesには検索オプションがあります。テーブルが初期化後に他のコンテンツを受信する場合、パラメータを設定できます：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
      });

}

3
Dierp

上記の回答は症状を処理しますが（ '再初期化できません'警告）、問題の根本原因に対処しません：あなたjQuery $.load()/$.ajax()/$.get()/$.post()成功コールバック内からDataTableを生成します。非同期AJAX呼び出しの性質に起因するあらゆる種類の問題を発生させます。

DataTables .destroy()メソッドを呼び出すと、サーバーからデータを取得するたびに、少なくともパフォーマンスの浪費であるDataTableを不必要に破棄して新しく作成するため、事態をさらに悪化させる可能性があります。

代わりに、DataTables ajax オプションを使用する必要があります。ロードする前にURLを変更する必要がある場合、DataTables APIメソッドの恩恵を十分に受け、パフォーマンスを損なうことなくデータを再取得する必要があります。たとえば、単に ajax.reload() を実行します。データを最新の状態にするには、 ajax.url().load()

OPの例の完全なライブ[〜＃〜] demo [〜＃〜]は、次のように単純に見えるかもしれません。

//initialize DataTables
const dataTable = $('#newsTable').DataTable({
        //specify AJAX source, params and response source
        ajax: {
                url: 'https://newsapi.org/v2/everything',
                data: () => ({
                                q: ($('input[name="subject"]:checked').val() || 'javascript'),
                                language: 'en',
                                apiKey: '699ba21673cd45aba406b1984b480b60'
                }),
                dataSrc: 'articles'
        },
        //set up table columns
        columns: [
                {title: 'Source', data: 'source.name'},
                {title: 'Title', data: 'title'},
                {title: 'Content', data: 'content'}
        ]
});

//trigger table data re-fetch with new subject
$('input[name="subject"]').on('change', () => dataTable.ajax.reload())
<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script type="application/javascript" src="test.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <label>Pick the subject:</label>
  <input type="radio" name="subject" value="python">python</input>
  <input type="radio" name="subject" value="javascript">javascript</input>
  <table id="newsTable"></table>
</body>
</html>
1
Yevgen Gorbunkov

$（ '＃mytable'）。DataTable（）。destroy（）; $（ '＃mytable'）。html（ ''）;

1
Joseph Ocampo