博客

以下是关于如何使用DataTables插件实现单行选择和删除的完整攻略：

1. 什么是单行选择和删除？

单行选择和删除是指在DataTables中，可以选择一行数据并将其删除。

1. 如何使用单行选择和删除？

可以使用以下代码来实现单行选择和删除：

var table = $('#example').DataTable();

$('#example tbody').on('click', 'tr', function () {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
});

$('#delete').click(function () {
    table.row('.selected').remove().draw(false);
});

在这个代码中，我们使用了$('#example').DataTable()来初始化DataTables。然后，我们使用$('#example tbody').on('click', 'tr', function () {...})来为表格中的每一行添加一个点击事件。在这个事件中，我们使用$(this).hasClass('selected')来检查当前行是否已经被选择。如果已经被选择，我们使用$(this).removeClass('selected')来取消选择。如果没有被选择，我们使用table.$('tr.selected').removeClass('selected')来取消之前选择的行，并使用$(this).addClass('selected')来选择当前行。最后，我们使用$('#delete').click(function () {...})来为删除按钮添加一个点击事件。在这个事件中，我们使用table.row('.selected').remove().draw(false)来删除被选择的行。

1. 示例1：实现单行选择和删除

var table = $('#example').DataTable();

$('#example tbody').on('click', 'tr', function () {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
});

$('#delete').click(function () {
    table.row('.selected').remove().draw(false);
});

在这个示例中，我们使用了上述代码来实现单行选择和删除。

1. 示例2：实现多行选择和删除

var table = $('#example').DataTable();

$('#example tbody').on('click', 'tr', function () {
    $(this).toggleClass('selected');
});

$('#delete').click(function () {
    var selectedRows = table.rows('.selected').data();
    for (var i = 0; i < selectedRows.length; i++) {
        table.row(selectedRows[i]).remove().draw(false);
    }
});

在这个示例中，我们使用了$(this).toggleClass('selected')来为表格中的每一行添加一个点击事件。在这个事件中，我们使用$(this).toggleClass('selected')来选择或取消选择当前行。然后，我们使用table.rows('.selected').data()来获取被选择的行的数据。最后，我们使用一个循环来删除被选择的行。

总结：

单行选择和删除是指在DataTables中，可以选择一行数据并将其删除。可以使用$('#example').DataTable()来初始化DataTables。可以使用$('#example tbody').on('click', 'tr', function () {...})来为表格中的每一行添加一个点击事件。可以使用table.row('.selected').remove().draw(false)来删除被选择的行。可以使用$(this).toggleClass('selected')来选择或取消选择当前行。可以使用table.rows('.selected').data()来获取被选择的行的数据。