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