如何获取jQuery DataTable所有分页页面的选中复选框值？

这个问题我之前也碰到过，你的代码只能拿到当前页选中值的原因很简单：jQuery DataTable在分页时，只会把当前页的行渲染到DOM中，其他页的行是被临时移除或者隐藏的，所以你直接用$('input[type="checkbox"]')遍历，只能找到当前页的复选框元素。

下面给你两种可行的解决方案：

方案一：通过DataTable API遍历所有行（最通用） #

首先你需要先保存DataTable的实例引用（初始化表格的时候记得存下来）：

// 初始化表格并保存实例
var myDataTable = $('#你的表格ID').DataTable({
    // 你的表格配置项
});

然后修改点击事件的代码，用DataTable的API获取所有行的DOM节点，再遍历找选中的复选框：

$('.btnprimary').click(function () {
    var selectedIds = [];
    // 用rows().nodes()获取所有分页的行DOM节点，不管是否在当前页
    myDataTable.rows().nodes().each(function(rowNode) {
        var checkbox = $(rowNode).find('input[type="checkbox"]');
        if (checkbox.is(':checked')) {
            // 收集选中的data-voucgerid值
            selectedIds.push(checkbox.attr('data-voucgerid'));
        }
    });

    // 这里可以处理收集到的所有选中ID
    console.log("所有选中的ID：", selectedIds);
    // 也可以逐个弹出（如果需要的话）
    selectedIds.forEach(function(id) {
        alert(id);
    });
});

方案二：利用DataTable的选择插件（更简洁，需配置） #

如果你开启了DataTable的选择功能，可以直接用API获取选中行的数据。首先初始化表格时配置选择项：

var myDataTable = $('#你的表格ID').DataTable({
    select: {
        style: 'multi', // 允许多选
        selector: 'input[type="checkbox"]' // 指定复选框为选择器
    },
    // 其他配置项
});

然后点击事件里直接获取选中行的自定义属性：

$('.btnprimary').click(function () {
    var selectedIds = [];
    // 获取所有选中的行
    myDataTable.rows({ selected: true }).nodes().each(function(rowNode) {
        selectedIds.push($(rowNode).find('input[type="checkbox"]').attr('data-voucgerid'));
    });
    console.log("所有选中的ID：", selectedIds);
});

注意事项 #

• 确保你的DataTable实例引用正确，不能用普通的jQuery对象$('#表格ID')，必须用初始化时返回的DataTable实例。
• 检查你的data-voucgerid属性拼写是否正确（看起来像是data-voucherid的笔误，不过按你实际的属性名来即可）。

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