Datatable复选框提交仅获取当前页数据问题求助

问题根源 #

Datatable分页时仅当前页的DOM元素会保留在页面中，其他页的元素会被临时移除。直接通过DOM选择器获取勾选框，只能拿到当前页的勾选数据，无法获取其他分页的选择项。

解决思路 #

手动维护一个全局数组跟踪所有分页中被勾选的ID：

• 监听复选框的勾选/取消事件，实时更新数组内容
• 提交表单时，将数组中的所有ID转为隐藏字段加入表单，确保后端能获取全部勾选数据

修改后的代码 #

var DT = $('#table-data-notice').DataTable({
    ...config,
    stateSave: true // 可选：开启状态保存，切换分页后保留勾选状态
});

// 全局数组存储所有勾选的ID
var selectedIds = [];

// 监听Datatable内复选框的状态变化（事件委托，兼容分页渲染）
DT.on('change', 'input[type="checkbox"]', function() {
    var id = $(this).val();
    if ($(this).is(':checked')) {
        // 避免重复添加ID
        if (!selectedIds.includes(id)) {
            selectedIds.push(id);
        }
    } else {
        // 取消勾选时移除对应ID
        selectedIds = selectedIds.filter(item => item !== id);
    }
});

$('#hantar').on('click', function(){
    if (selectedIds.length === 0) {
        swal('Amaran', 'Sila pilih sekurang-kurangnya satu notis', 'warning');
        return false;
    }

    var $form = $('#verify-form');
    // 清空之前的隐藏字段，防止重复提交
    $form.find('input[name="selected_ids[]"]').remove();
    
    // 将所有勾选ID添加为表单隐藏字段
    selectedIds.forEach(function(id) {
        $form.append(
            $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'selected_ids[]')
                .val(id)
        );
    });

    swal({
        title: "Anda pasti?",
        type: "warning",
        showCancelButton: true,
        confirmButtonText: '{!! __('Ya') !!}',
        cancelButtonText: '{!! __('Tidak') !!}'
    },
    function(confirmed){
        if (confirmed) {
            $('#verify-form').removeAttr('data-success');
            $('#verify-form').submit();
        }
    });
});

后端获取数据 #

在Laravel控制器中，直接通过请求对象获取所有勾选的ID数组：

$selectedIds = $request->input('selected_ids');
// 后续处理逻辑，比如批量更新、删除等

内容的提问来源于stack exchange，提问作者Adam Fiqrie Putra