DataTables：删除一行并添加另一行使删除的行重新出现

Question

我遇到了与Deleted Rows appear back upon adding new row DataTables类似的问题，但他有关使用row().delete().draw(false);的解决方案对我无效。

我有这张表，我需要添加和删除行。除了当我添加一行，删除它，然后添加一个新行之外，大多数情况下都添加和删除工作。当我添加一个新的时候，删除的行会与新的一起再次出现。

这是JavaScript代码，我用它来创建表时添加的第一行并添加新行的时候在这里添加额外的行

$('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 
       }); 
      } 

     } 
    }); 

相关的部分是

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

我有几个表，所以t这就是为什么我使用.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); 
}