如何在使用AJAX的jQuery DataTable中实现单行/多行选择

要解决你的问题，需要在DataTable配置中启用选择功能，并添加对应的交互逻辑来获取选中行数据，以下是具体实现步骤：

1. 启用DataTable选择功能 #

根据需求选择单行或多行模式，修改DataTable初始化代码：

多行选择（带复选框） #

添加复选框列和选择配置，支持批量选择：

$("#DATATABLE").DataTable({
    serverSide: true,
    filter: true,
    searchDelay: 1000,
    scrollY: StaticData.TABLE_HEIGHT + 'px',
    lengthMenu: StaticData.TABLE_PAGE_SIZE,
    language: { searchPlaceholder: "Name, Teacher" },
    scrollCollapse: true,
    // 启用多行选择
    select: {
        style: 'multi',
        selector: 'td:first-child'
    },
    ajax: {
        url: '/STUD_MANAGEMENT/LoadStud',
        type: 'GET',
        datatype: 'json',
        headers: { 'RequestVerificationToken': 'your json token' },
        data: (d) => {                    
            return { draw: d.draw, start: d.start, length: d.length, search: d.search.value, FilterByColumn: d.columns[d.order[0].column].data, ASC_DSEC: d.order[0].dir }
        },
        beforeSend: () => { ShowLoader(); },
        complete: () => { HideLoader(); },
        dataSrc: (json) => {
            json = json.data;                    
            return json;
        }
    },
    columnDefs: [
        { className: "dt-center", targets: [5, 6, 7, 8, 11], width: '2%' },
        { className: "dt-body-center", targets: 0 }
    ],
    columns: [
        // 新增复选框列
        { 
            data: null, 
            title: '<input type="checkbox" id="select-all">', 
            orderable: false, 
            render: (data, type, row) => `<input type="checkbox" class="row-select" data-stud-id="${row.STUD_ID}">`
        },
        { data: 'STUD_ID', title: 'STUD ID', autoWidth: false, visible: false },
        { data: 'CLASS_ID', title: 'CLASS ID', autoWidth: false, visible: false },
        { data: 'NAME', title: 'Name', autoWidth: true, searchable: true },
        { data: 'AGE', title: 'Age', autoWidth: true },
        { data: 'TEACHER', title: 'Teacher', autoWidth: true },               
    ]            
});

// 全选/取消全选逻辑
$('#select-all').on('click', function() {
    const table = $('#DATATABLE').DataTable();
    const rows = table.rows({ search: 'applied' }).nodes();
    $('input[type="checkbox"]', rows).prop('checked', this.checked);
    this.checked ? table.rows({ search: 'applied' }).select() : table.rows({ search: 'applied' }).deselect();
});

// 行内复选框同步选中状态
$('#DATATABLE').on('change', '.row-select', function() {
    const table = $('#DATATABLE').DataTable();
    const row = table.row($(this).closest('tr'));
    this.checked ? row.select() : row.deselect();
});

单行选择（点击整行选中） #

若只需单行选择，简化配置即可：

$("#DATATABLE").DataTable({
    // 保留原有配置...
    select: {
        style: 'single' // 启用单行选择，点击整行触发
    },
    // 保留原有columns配置，无需添加复选框列
});

2. 添加按钮并实现选中数据获取 #

在页面中添加按钮：

<button id="get-selected-btn" class="btn btn-primary">获取选中数据</button>

编写获取选中数据的脚本：

$('#get-selected-btn').on('click', function() {
    const table = $('#DATATABLE').DataTable();
    const selectedRows = table.rows({ selected: true }).data();
    const selectedData = [];

    selectedRows.each(row => {
        selectedData.push({
            STUD_ID: row.STUD_ID,
            CLASS_ID: row.CLASS_ID,
            NAME: row.NAME,
            AGE: row.AGE,
            TEACHER: row.TEACHER
        });
    });

    // 可根据需求处理数据，例如打印、提交后端
    console.log('选中数据:', selectedData);

    // 提交到后端示例
    /*
    $.ajax({
        url: '/STUD_MANAGEMENT/ProcessSelected',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(selectedData),
        success: res => console.log('处理成功:', res),
        error: err => console.error('处理失败:', err)
    });
    */
});

3. 后端接收数据（可选） #

若需将选中数据提交到后端，在STUD_MANAGEMENT控制器添加方法：

[HttpPost]
public IActionResult ProcessSelected([FromBody] List<STUD_MANAGEMENT> selectedData)
{
    // 处理选中数据，例如批量更新、删除等
    foreach(var item in selectedData)
    {
        // 示例逻辑：输出选中的学生ID
        Console.WriteLine($"选中学生ID: {item.STUD_ID}");
    }
    return Ok(new { Success = true, Message = "数据处理完成" });
}

关键注意事项 #

• 确保引入DataTables Select扩展：若使用CDN，需添加以下资源：

  <link rel="stylesheet" href="https://cdn.datatables.net/select/1.7.0/css/select.dataTables.min.css">
  <script src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>
  

• 修复控制器中的类型错误：STUD_MANAGEMENT类的AGE是int类型，但示例中赋值为字符串（如dm.AGE = "12"），需改为整数：dm.AGE = 12，避免JSON序列化失败。

内容的提问来源于stack exchange，提问作者KitKat