動的列を持つデータテーブルに対して同じタイプの行を動的かつ正確に追加できますか？

Question

私のデータテーブルを使用すると、データテーブルAPIを使用して行を追加できます。

$('#table_add').on('click', function() { 
    table.row.add([ 
     "<textarea id=\"mp\" name=\"c1\"></textarea>", 
     "<input type=\"number\" id=\"dis\" name=\"col2\">", 
     "<input type=\"number\" id=\"mrc\" name=\"col3\">", 
     "<input type=\"number\" id=\"mdp\" name=\"col4\">", 
    ]).draw(false); 
    mpsum++ 
}); 

カラムを追加することもできます。

function AddColumn(){ 
    $('#table tr').append($("<td>")); 
    $('#table thead tr>td:last').append($("<textarea id=\"m\" name=\"addedHeader\"></textarea>")); 
    $('#mptable tbody tr').each(function(){ 
     mpsum++; 
     $(this).children('td:last').append($("<input type=\"number\" id=\"mdp\" name=\"addedRows\">"))}); 
} 

これは、データテーブルを追加する前の状態です。

---

彼は新しい列を追加する前に新しい行を追加する場合、ユーザーは正常に新しい行を追加することができます。

---

列の前に行を追加します。しかし、私のデータテーブルは、彼が新しい行を追加する前に、ユーザーは新しい列を追加した場合、正しく新しい列に新しい行を追加することができません。

行

---

の前に列を追加し、私はこの問題を修正するために何ができるものはありますか？

Answer 1

できません動的に列を追加します。まったく。 はのように見えますが、これはjQueryを通じてDOMを扱っているからです。 dataTables APIで何かをしようとするとすぐに失敗します。マークアップは、基本となるデータテーブル "キャッシュ"または内部構造と一貫していません。 は、列を正常に追加するためにdataTableを再生成する必要があります。

//Your table must have destroy: true 
var table = $('#example').DataTable({ 
    //other options goes here 
    destroy: true 
}) 

//in AddColumn, destroy() the table, then add new DOM nodes properly 
//table = $('#example').DataTable({}) will recreate the dataTable 
//WITH the old settings 
function AddColumn() { 
    table.destroy(); 
    $('#example thead tr').append('<th>New</th>'); 
    $('#example tbody tr').each(function(i, tr) { 
    $(tr).append('<td>'+i+'</td>'); 
    }) 
    table = $('#example').DataTable({}) 
} 

これ以降、テーブルに新しい行を追加することができます。もちろん、あなたはあなたが望むものを新しい<th>と新しい<td>のものに挿入しなければなりません。あなたが2つの異なるテーブルを参照して混乱しました:)作業デモを参照してください - >http://jsfiddle.net/qmh399ap/