如何使用 DataTables 插件实现单行选择和删除

DataTables 是一个非常流行的 jQuery 插件，用于处理表格数据。除了提供一组功能丰富的 API 之外，它也非常容易自定义和扩展。

本文将介绍如何使用 DataTables 插件实现单行选择和删除的功能。

准备工作

在开始之前，需要先引入 jQuery 和 DataTables 的库文件。

<!-- 引入 jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入 DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

然后，需要在 HTML 中创建一个具有 id 为 example 的表格。

<table id="example">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...
    </tbody>
</table>

初始化 DataTables

在上一步创建表格之后，需要初始化 DataTables 插件。

$(document).ready(function() {
    // 初始化 DataTables
    var table = $('#example').DataTable({
        select: 'single' // 设置只能选择单行
    });

    // 监听选中事件
    table.on('select', function(e, dt, type, indexes) {
        console.log('选中行', indexes);
    });

    // 监听取消选中事件
    table.on('deselect', function(e, dt, type, indexes) {
        console.log('取消选中行', indexes);
    });
});

上面的例子初始化了一个 DataTables 对象，设置只能选择单行，并监听了选中和取消选中两个事件。

删除选中行

接下来，我们可以在页面上添加一个按钮，在点击时删除选择的行。

<button id="delete">删除</button>

然后添加以下 JavaScript 代码实现删除功能。

$(document).ready(function() {
    var table = $('#example').DataTable({
        select: 'single'
    });

    $('#delete').click(function() {
        var rows = table.rows('.selected');
        if (rows.length > 0) {
            rows.remove().draw(false);
        }
    });

    table.on('select', function(e, dt, type, indexes) {
        console.log('选中行', indexes);
    });

    table.on('deselect', function(e, dt, type, indexes) {
        console.log('取消选中行', indexes);
    });
});

上面的代码添加了一个点击事件，获取选择的行，并删除它们。

结论

在本文中，我们学习了如何使用 DataTables 插件实现单行选择和删除的功能。这将使你的表格交互更友好且易于使用。