javascript - JQuery Datatable 在获取时恢复为默认值

Question

你好我有一个按钮，当点击时，从数据表中删除一行然后重新绘制。我试过了 this但它在删除行时将我的数据表恢复为默认设置:

var tbl;
$(document).ready(function() {
    tbl = $('#myTable').DataTable({
        "bLengthChange": false,
        "bFilter": false,
        "iDisplayLength": 5,
        "columns": [{
            "width": "50%"
        }, {
            "width": "10%"
        }, {
            "width": "10%"
        }, {
            "width": "10%"
        }, {
            "width": "10%"
        }],
        "responsive": true,
        "retrieve": true
    });
});

function delete()
   tbl.rows($(this).parents('tr')).remove().draw();
}

我也试过了，我得到了同样的结果:

function delete()
   $('#myTable').DataTable().rows($(this).parents('tr')).remove().draw();
}

我也试过包括reinitializing表，但我得到一个错误

function delete() {
    var tbl = $('#myTable').DataTable({
        "bLengthChange": false,
        "bFilter": false,
        "iDisplayLength": 5,
        "columns": [{
            "width": "50%"
        }, {
            "width": "10%"
        }, {
            "width": "10%"
        }, {
            "width": "10%"
        }, {
            "width": "10%"
        }],
        "responsive": true,
        "retrieve": true
    });

    tbl.rows($(this).parents('tr')).remove().draw();
}

正确的做法是什么？

Answer 1

您的代码中有一些拼写错误，我还没有看到 HTML...但是无论如何，这是一个有效的示例:http://jsbin.com/quhologaba/1/edit

代码片段:

$(document).ready(function() {

    var tbl = $('#myTable').DataTable({
        "bLengthChange": false,
        "bFilter": false,
        "iDisplayLength": 5,
        "responsive": true,
        "retrieve": true
    });

  $('#myTable tbody').on( 'click', '.remove', function () {
    alert('clicked');
    console.log(tbl);
    tbl.row( $(this).parents('tr') ).remove().draw();
  } );

});