如何在PHP+jQuery的DataTable中获取全分页选中复选框的ID

问题描述 #

给DataTable每一行添加复选框后，仅能获取当前分页的选中项ID。比如在第1、2页分别选中数据，提交时只能拿到第2页的选中ID，需要实现获取所有分页中选中数据的ID。

原有代码 #

Blade渲染代码 #

@foreach($data as $key => $question_bank)
  <tr id="{{ $question_bank->id }}">
    <td>
        <input type="checkbox" data-id="{{ $question_bank->id }}" class="add_check">
    </td>
    <td>{{++$i}}</td>
    <td>{{ $question_bank->questionCategory->category }}</td>
    <td>{{$question_bank->question}}</td>
  </tr>
@endforeach

<button type="submit" id="add_to" class="mt-3 btn btn-primary float-right">Add</button>

原有jQuery处理代码 #

$(document).on('click','#add_to',function(e){
  e.preventDefault();
  var questionids_arr = [];
  $("input:checkbox[class=add_check]:checked").each(function () {
     questionids_arr.push($(this).attr('data-id'));
  });
  console.log(questionids_arr);
  return false;
});

解决方案 #

因为DataTable切换分页时会销毁非当前页的DOM元素，所以需要手动维护全局数组记录选中状态，并在表格重绘时恢复复选框选中样式：

修改后的jQuery代码 #

// 全局数组存储所有选中的问题ID
let selectedQuestionIds = [];

// 监听复选框状态变化，更新全局数组
$(document).on('change', '.add_check', function() {
    const questionId = $(this).data('id');
    if ($(this).is(':checked')) {
        // 避免重复添加
        if (!selectedQuestionIds.includes(questionId)) {
            selectedQuestionIds.push(questionId);
        }
    } else {
        // 取消选中时从数组移除
        const index = selectedQuestionIds.indexOf(questionId);
        if (index !== -1) {
            selectedQuestionIds.splice(index, 1);
        }
    }
});

// DataTable重绘（分页切换、搜索等）时，恢复当前页复选框的选中状态
$('#yourDataTableId').on('draw.dt', function() {
    $('.add_check').each(function() {
        const questionId = $(this).data('id');
        $(this).prop('checked', selectedQuestionIds.includes(questionId));
    });
});

// 提交按钮点击事件，直接使用全局数组
$(document).on('click','#add_to',function(e){
    e.preventDefault();
    console.log(selectedQuestionIds);
    // 此处可将selectedQuestionIds提交至后端处理
    return false;
});

注意事项 #

• 替换代码中的#yourDataTableId为你实际的DataTable容器ID（比如表格的id属性值）
• 全局数组selectedQuestionIds会始终记录所有分页中选中的ID，不受分页切换影响
• draw.dt事件会在DataTable每次重绘时触发，确保切换分页后之前选中的复选框能保持选中样式

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