【问题标题】:Delete multiple selected DataTable rows with one click?一键删除多个选中的DataTable行?
【发布时间】:2013-10-23 16:27:33
【问题描述】:

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

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

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

【问题讨论】:

    标签: javascript jquery datatables


    【解决方案1】:

    这将删除多行...

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

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

    使用上述方法只是直接从表中删除行,这更容易,并且如果您随时更改dataTables的版本,也可以省去麻烦。

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

    【讨论】:

    • 这正是我所需要的。我想多了。谢谢!
    • 没问题 - 很高兴为您提供帮助 :)
    • 我使用这种方法删除表中的行,但我也有一个添加行功能。我不知道为什么在删除多行/单行后添加新行时,已删除的行会被添加回其特定位置。我希望你能帮助我。
    • @newbie 没有看到您的代码并且不知道如何添加新行,就无法知道。我建议你问一个新问题:)
    • 当你想删除你看不到的条目时不能使用分页.. :/
    【解决方案2】:

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

    $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
    
        for (var i = 0; i < anSelected.length; i++) {
            oTable.fnDeleteRow(anSelected[i]);
        };
    });
    

    Datatable 有删除功能行,但只有 1 行。所以我只是循环它。信息也会更新。

    显示 3 个条目中的 1 到 3 个

    这里是我的代码和演示

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

    【讨论】:

    • 当你想删除你看不到的条目时不能使用分页.. :/
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-13
    • 2021-08-13
    • 2013-11-09
    • 2021-04-28
    • 1970-01-01
    相关资源
    最近更新 更多