jQueryを使ってajaxの後にテーブルを更新する

Question

私はこのトピックに関する多くの情報があると言って始めますが、更新しようとするとベストプラクティスとみなされるものを明確にするための確かな答えは見つけられませんAjaxコール後のテーブル。

私は、ユーザーが日付範囲を選択してajax呼び出しを生成した後、新しいデータで更新したいHTMLテーブルを持っています。 範囲が選択された後、AJAX呼び出しが新しいテーブルを作成し、私はこのようなDOMの更新：

$(document).ready(function(){ 
$('#selecDate').on('DOMSubtreeModified',function(){ 

    range = getRange() ; 

    $.ajax({ 
       type: 'POST', 
       url: '/revenue', 
       data: {'start' : range[0], 'end' : range[1]}, 
       dataType: 'json', 
       success: function(response){ 
       updateTable(response); 
       }, 
       error: function(response){ 
        console.log('error:' + response); 
       }, 
      }); 
}); 
}); 

updateTable(response) - レスポンスを受け付けた場合に呼び出されてい関数： 関数updateTable（応答）{

var table = '<table class="table table-bordered data-table sortable" id="rev-table"><thead>'; 
table += '<tr><th colspan="10">Income</th><th colspan="9">Spent</th>'; 
table += '<tr><th>Website Name</th><th>Google</th>...LOTS OF LINES 
var total_spent= response[website]['total_spent'];...LOTS OF LINES 
table += '<tr><td>' + website + '</td>'; 
table += '</tr>'; 
} 
table += '</tbody></table>'; 
$('#rev-table-cont').html(table); 

を

それは長いテーブルなので、大きな部分を切り詰めましたが、あなたは考えを持っていると思います... 私はどこにでもたくさんの書いたが、彼らはすべて同じことをしている。私はこのコードを使用してテーブルを並べ替えることができるように使用：

$(document).ready(function(){ 

    $('#rev-table').DataTable({ 
     "bJQueryUI": true, 
     "processing": true, 
     "sPaginationType": "full_numbers", 
     "sDom": '<""l>t<"F"fp>' 
     }); 
    $('select').select2(); 

    $('.active').removeClass("active"); 
    $('#revenueReport').addClass("active"); 

}); 

しかし、今はもう、このライン

$('#rev-table-cont').html(table); 

表がソート可能でないとDOMを新しいテーブルを作成し、更新した後コードは効果がなく、コンソールにエラーはありません。 私はこのリンクのようなすべてのトピックに関するいくつかのリードを見つけました： https://datatables.net/reference/api/ajax.reload()、または多くの質問がここにありますが、私はこの問題を解決すべきかについて明確な答えを得ることができません。ベストプラクティスと考えているか、別の方法がありますか？ ajax呼び出しの後にテーブルがもうソートできないのはなぜですか？ 任意のリードは非常に役に立つでしょう... thx！

Answer 1

これは表示されていませんが、ページが読み込まれると、「rev-table-cont」要素の子であるid「rev-table」の表があると想定します。このテーブルには、DataTable機能が（スクリプトごとに）適用されています。

問題は、ajaxが適用された後、新しい<table>要素を作成して置き換えますが、idを付けないことです。 <table class="table table-bordered data-table sortable" id="rev-table">：それは表に正しいIDを与えるよう 1）あなたのupdateTable方法で<table class="table table-bordered data-table sortable">を変更します。

は、ソリューションのカップルがあります。それで、事実上新しい要素なので、すでにDataTableの機能をもう一度適用する必要があります（つまり、すでに同じ$('#rev-table').DataTable(...コードを使用している必要があります）。

これにはいくつかの欠点があります。あなたが必要としないコードや、ユーザーがテーブルに設定した既存の並べ替え/フィルタリングなどの設定が破壊されて迷惑をかける可能性があります。

2）これはオプションです：テーブルを削除して再作成しないでください。テーブル内の行のみを変更してください。これらの線に沿って機能を変更します。

function updateTable(response) 
{ 
    var tableBody = $("#rev-table tbody"); 
    tableBody.empty(); //delete all the existing rows (from the body only, not the header) 

    //here, process your response data to create new rows. You can create a new row like this: 
    var row = $("<tr/>"); 
    //now go through your data items and append all the necessary cells. You can create a cell, and append it to the row something like this: 
    $("<td/>", { text: response[website]['total_spent'] }).appendTo(row); 
    //repeat that for each cell you need. Then once you have all the cells, append the row to the table: 
    row.appendTo(tableBody); 
    //and repeat that for each row you need 
}