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

【问题标题】：DataTables: deleting a row and the adding another makes the deleted row reappearDataTables：删除一行并添加另一行使删除的行重新出现
【发布时间】：2016-04-22 13:01:35
【问题描述】：

我遇到了与 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);
}

我有几张表，所以我使用.closest() 函数来确定用户点击删除行的位置。

知道我可能会错过什么吗？

【问题讨论】：

标签： jquery datatables

【解决方案1】：

我知道发生了什么。基本上，在像这样定义 tr 变量之前，我必须将表初始化为 Datatable。然后我可以使用 row 方法。

function deleteRow(obj){

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

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

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

【讨论】：