jQuery DataTables 复选框 - Javascript

简介

jQuery DataTables 是一款功能强大的 jQuery 表格插件，可以对数据进行排序、过滤、分页等操作。在 jQuery DataTables 中，可以通过添加复选框来实现同时对多行数据进行操作的功能。

使用方法

步骤一：引入依赖

在 HTML 文件头部添加以下依赖：

<!-- 引入jQuery和DataTables -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

步骤二：配置表格

实例化 DataTables 对象时需要传入一些参数来配置表格，其中包括添加复选框的相关配置。

$(document).ready(function() {
    $('#myTable').DataTable({
        // 启用复选框
        select: {
            style: 'multi'
        },
        // 配置列
        columns: [
            // 添加复选框列，用于选择行
            {
                title: '<input type="checkbox" id="selectAll">全选',
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            // 其他列
            { title: "姓名", data: "name" },
            { title: "性别", data: "gender" },
            { title: "年龄", data: "age" },
            { title: "职位", data: "position" },
            { title: "办公室", data: "office" },
            { title: "入职日期", data: "start_date" },
            { title: "薪水", data: "salary", render: $.fn.dataTable.render.number(',', '.', 0, '￥') },
        ],
        // 数据源
        data: [
            // 数据
        ]
    });
});

其中，columns 中添加了一个标题为空的列，这一列将用于显示复选框，className 属性为 select-checkbox，这里是 DataTables 原生的样式名称，用于应用样式。

步骤三：全选/反选

为了方便全选和反选功能，需要在 HTML 中添加一个全选框，并在 DataTables 初始化时绑定相应事件。

<input type="checkbox" id="selectAll"> 全选

$(document).ready(function() {
    // 初始化 DataTables
    var table = $('#myTable').DataTable({
        // 配置
        // ...
    });

    // 全选/反选事件
    $('#selectAll').on('click', function() {
        var checkboxes = $('tbody .select-checkbox');
        checkboxes.prop('checked', $(this).prop('checked'));
        checkboxes.trigger('click');
    });
});

注意事项

• 使用 DataTables 自带的复选框样式需要将 .select-checkbox::before 样式设置为显示，否则可能无法显示复选框。
• 在操作表格时，需要通过复选框列的索引来获取选中的行数据。例如，通过 table.column(0).checkboxes.selected() 可以获取到第一列复选框选中的行数据。

参考文献

• DataTables 官方文档
• jQuery DataTables 带多选框的表格