jQueryのDatables新しい行を削除し、追加

Question

私が使用しています：https://datatables.net

問題：

私はいくつかの行を削除した後に新しい行を追加する場合、私は削除された行が戻ってくるからjquery.dataTables.jsを。

私は別の行を追加した後、私は、1行を追加し、これを削除すると、その私がアーカイブにしようとすることであるだけではなく、1

2を挿入します。削除

行が戻っていない削除されます。

新しい行を追加すると1だけ追加されますが、前に行を削除しても問題はありません。

HTML：

<table id="example" class="display" width="100%" cellspacing="0"> 
    <thead> 
    <tr> 
     <th>order</th> 
     <th>name</th> 
     <th>country</th> 
     <th>delete</th> 
    </tr> 
    </thead> 
</table> 

<button id="addRow">Add New Row</button> 
<table id="newRow"> 
    <tbody> 
    <tr> 
     <td>Line 2 
     <input type="hidden" value="2" /> </td> 
     <td>DVap 
     <input type="hidden" value="DVap" /> </td> 
     <td> 
     <input type="text" value="22" /> </td> 
     <td> 
     <i class="fa fa-minus-square" aria-hidden="true"></i> </td> 
    </tr> 
    </tbody> 
</table> 

はjqueryの：

$(document).ready(function() { 
    var dt = $('#example').dataTable(); 
    dt.fnDestroy(); 

    }); 
    $(document).ready(function() { 
    var url = 'http://www.json-generator.com/api/json/get/bQzyuEGndu?indent=2'; 
    var table = $('#example').DataTable({ 
     ajax: url, 
     rowReorder: { 
     dataSrc: 'order', 
     }, 
     columns: [{ 
     data: 'order' 
     }, { 
     data: 'place' 
     }, { 
     data: 'name' 
     }, { 
     data: 'delete' 
     }], 
     "fnDrawCallback": function(oSettings) { 
     $("i.fa.fa-minus-square").click(function(event) { 
      $(this).closest("tr").remove(); 
     }); 
     } 
    }); 
    // add row 
    $('#addRow').click(function() { 
     //t.row.add([1,2,3]).draw(); 
     var rowHtml = $("#newRow").find("tr")[0].outerHTML 
     console.log(rowHtml); 
     table.row.add($(rowHtml)).draw(); 
    }); 
    }); 

jsfiddle：http://jsfiddle.net/5L2qy092/3/

Answer 1

あなたは他の賢明なのDataTableが実際に削除いただきました！知っているカント、行を削除/削除するDataTableのAPIを使用する必要があります。

また、あなたが

あなたが click eventハンドラを追加したくないので、 fnDrawCallback火災テーブルが描くたび以来、代わりに initCompleteを使用するたびに必要

"initComplete": function(oSettings) { 
    $("i.fa.fa-minus-square").click(function(event) { 
     table.row($(this).closest('tr')).remove().draw(); 
    }); 
    } 

JSFIDDLE

EDIT

作業動的に追加される行にjquery delegate clickを使用する

"initComplete": function(oSettings) { 
    $(this).on("click", "i.fa.fa-minus-square", function(event) { 
     table.row($(this).closest('tr')).remove().draw(); 
    }); 
    }