DataTables：行を削除して別の行を削除すると、削除された行が再び表示されます

Question

Deleted Rows appear back upon adding new row DataTablesと同様の問題が発生していますが、row().delete().draw(false);を使用する方法についての彼の解決策は機能しませんでした。

私は行を追加および削除する必要があるこのテーブルを持っています。行を追加して削除した後、新しい行を追加する場合を除いて、ほとんどの場合、作業の追加と削除は大丈夫です。新しいものを追加すると、削除された行が新しいものと一緒に再表示されます。

これは私が最初の行が追加されたときにテーブルを作成し、新しい行を追加する場合、ここで追加の行

$('body').on('click', ".btn-dataset", function(){ 

     $("#div-warn").empty(); 

     if(!$('#dst-num').val() || !$('#questionnaire').val() || !$('#dst-subjectnum').val()){ 
      var warn = '<p><b>The main information about the dataset is required.</b></p>'; 
      $(warn).appendTo('#div-warn'); 
     }else{ 
      var num_dataset = $('#dst-num').val(); 
      var questionnaire = $('#questionnaire').val(); 
      var num_subjects = $('#dst-subjectnum').val(); 
      var info_dataset = $('#dst-info').val(); 
      $('#dst-num').val(''); 
      $('#questionnaire').val(''); 
      $('#dst-subjectnum').val(''); 
      $('#dst-info').val(''); 

      if($('#dataset-table').length){ 

       var et = $('#dataset-table').DataTable(); 
       et.row.add([ 
        num_dataset, 
        questionnaire, 
        num_subjects, 
        info_dataset, 
        '<a href="#" onclick="deleteRow(this)"><span class="glyphicon glyphicon-trash delete-row"></span></a>' 
       ]).draw(false); 

      }else 
      { 
       var html = '<table class="table table-hover display" id="dataset-table">'; 
       html += '<caption><span id="table-title">Datasets</span></caption>'; 
       html += '<thead><tr><th><b>Dataset Number</b></th><th><b>Questionnaire Name</b></th><th><b>Number of Subjects</b></th><th><b>Information on the dataset</b></th><th class="no-sort"></th></tr></thead><tbody>'; 
       html += '<tr>'; 
       html += '<td>' + num_dataset + '</td>'; 
       html += '<td>' + questionnaire + '</td>'; 
       html += '<td>' + num_subjects + '</td>'; 
       html += '<td>' + info_dataset + '</td>'; 
       html += '<td><a href="#" onclick="deleteRow(this)"><span class="glyphicon glyphicon-trash delete-row"></span></a></td>'; 
       html += '</tr>'; 
       html += '</tbody></table>'; 
       $(html).appendTo('#div-dataset'); 

       $('#dataset-table').DataTable({ 
        "order": [[ 0, "desc" ]], 
        "aoColumnDefs": [ 
         { 'bSortable': false, 'aTargets': [ "no-sort" ] } ], 
        "bFilter": false, 
        "scrollY": "200px", 
        "scrollCollapse": true, 
        "paging": false, 
        "info": false 
       }); 
      } 

     } 
    }); 

関連部分を追加するために使用するJavaScriptコードでは、この

  var et = $('#dataset-table').DataTable(); 
      et.row.add([ 
       num_dataset, 
       questionnaire, 
       num_subjects, 
       info_dataset, 
       '<a href="#" onclick="deleteRow(this)"><span class="glyphicon glyphicon-trash delete-row"></span></a>' 
      ]).draw(false); 

あります

これで行を削除するコードは次のとおりです。

function deleteRow(obj){ 

    var tbl = $(obj).closest('table'); 

    var tr = $(obj).closest('tr'); 

    tbl.DataTable(); 

    tr.remove().draw(false); 
} 

私はいくつかのテーブルを持っていますなぜ私は.closest()関数を使用して、ユーザーが行を削除するためにクリックしたかを把握するのです。

私が紛失している可能性のあるアイデアはありますか？

Answer 1

私は何が起こっているのか把握しました。基本的には、このようなtr変数を定義する前にテーブルをDatatableとして初期化しなければなりませんでした。そして、私は行のメソッドを使用することができます。

function deleteRow(obj){ 

    var tbl = $(obj).closest('table').DataTable(); 

    var tr = $(obj).closest('tr'); 

    tbl.row(tr).remove().draw(false); 
}