jQuery Datatable Checkbox选中的行数据

在使用jQuery Datatable进行数据展示时，有时需要通过复选框选中多行数据进行操作。本文将介绍如何通过复选框选中行数据并进行操作。

HTML结构：

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="chk[]" value="1"></td>
            <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><input type="checkbox" name="chk[]" value="2"></td>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk[]" value="3"></td>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        ...
    </tbody>
</table>

以上为一个基础的HTML表格结构，其中每行记录有一个复选框。

JavaScript代码：

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

    //当对某个checkbox进行操作时，对应的行被选中或取消选中
    $('#example tbody').on('click', 'input[type="checkbox"]', function() {
        if($(this).prop('checked')) {
            $(this).closest('tr').addClass('selected');
        } else {
            $(this).closest('tr').removeClass('selected');
        }
    });

    //获取选中行的数据
    $('#button').click(function() {
        var rowData = [];

        $('#example tbody input[type="checkbox"]:checked').each(function() {
            var row = table.row($(this).closest('tr')).data();
            rowData.push(row);
        });

        console.log(rowData); //打印选中的行数据
    });
});

当对复选框进行操作时，通过closest获取最近的tr元素，然后给该行添加或移除selected类名，使其选中或取消选中的效果。另外，当点击按钮时，通过each循环遍历选中的行，并通过table.row中的data()获取该行的数据，最终将选中行的数据push到rowData数组中。

以上即为通过jQuery Datatable实现复选框选中行数据的方法。