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

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

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

1 个答案: