javascript 一键删除多个选定的DataTable行？

Delete multiple selected DataTable rows with one click?

提问by triplethreat77

I am using an example from Datatables to delete rows from a table. This works fine, one by one but I need the ability to select and delete multiple rows. I commented the //.removeClass('row_selected');so the user is visually able to select more than one row, but still the rows only delete one at a time. Ideas? https://datatables.net/release-datatables/examples/api/select_single_row.html

我正在使用 Datatables 中的示例从表中删除行。这一项一项工作正常，但我需要能够选择和删除多行。我评论了//.removeClass('row_selected');所以用户可以在视觉上选择不止一行，但这些行仍然一次只删除一行。想法？ https://datatables.net/release-datatables/examples/api/select_single_row.html

http://jsfiddle.net/BWCBX/22/

http://jsfiddle.net/BWCBX/22/

jQuery

jQuery

var oTable;

$(document).ready(function() {
    /* Add a click handler to the rows - this could be used as a callback */
    $("#example tbody tr").click( function( e ) {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        }
        else {
            oTable.$('tr.row_selected')//.removeClass('row_selected');
            $(this).addClass('row_selected');
        }
    });

    /* Add a click handler for the delete row */
    $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        if ( anSelected.length !== 0 ) {
            oTable.fnDeleteRow( anSelected[0] );
        }
    } );

    /* Init the table */
    oTable = $('#example').dataTable( );
} );


/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
    return oTableLocal.$('tr.row_selected');
}*

回答by Reinstate Monica Cellio

This will delete multiple rows...

这将删除多行...

$('#delete').click( function() {
    var anSelected = fnGetSelected( oTable );
    $(anSelected).remove();
} );

This is preferable to using the in-built delete method in dataTables as it changed quite drastically at one point. Initially, it would retain row indexes between deletes, so you could delete row 1, then row 2, then row 3 etc.. It was then changed so that you could delete row 1, and row 2 would becomerow 1, so you'd have to delete row 1 again etc..

这比在 dataTables 中使用内置删除方法更可取，因为它在某一时刻发生了相当大的变化。最初，它会在删除之间保留行索引，因此您可以删除第 1 行，然后是第 2 行，然后是第 3 行等等。然后更改为您可以删除第 1 行，第 2 行将成为第 1 行，因此您d 必须再次删除第 1 行等等。

Using the above method just removes the rows from the table directly, which is much easier and will save you hassle if changing versions of dataTables at any time.

使用上面的方法只是直接从表中删除行，这更容易，并且在任何时候更改数据表的版本时都可以省去麻烦。

http://jsfiddle.net/BWCBX/23/

http://jsfiddle.net/BWCBX/23/

回答by Ganjar Setia

Here my version, It will delete multiple row and update data info in the footer

这是我的版本，它将删除多行并更新页脚中的数据信息

$('#delete').click( function() {
    var anSelected = fnGetSelected( oTable );

    for (var i = 0; i < anSelected.length; i++) {
        oTable.fnDeleteRow(anSelected[i]);
    };
});

The Datatable have delete function row, but only 1 row. So I just looping it. The info will be updated too.

数据表有删除功能行，但只有 1 行。所以我只是循环它。信息也会更新。

Showing 1 to 3 of 3 entries

显示 1 到 3 个条目，共 3 个条目

here my code and demo

这是我的代码和演示

http://jsfiddle.net/BWCBX/95/

http://jsfiddle.net/BWCBX/95/