本文详解如何在 datatable 表格交互中，精准捕获用户对复选框（启用/禁用）的操作差异，仅将“状态发生变更”的条目（新增启用或取消启用）构造成标准化 api 请求对象，并正确统计变更总数。

在前端数据同步场景中（如权限配置、告警开关批量提交），常见需求是：不提交全部当前选中状态，而只提交“本次操作引起的状态变更”——即：新勾选的项标记 "enable": true，新取消勾选的项标记 "enable": false，未改动的项完全忽略。这既能减少无效请求负载，又能精准反映用户意图。

但初学者常陷入两个典型误区：

• ❌ 直接收集所有 :checked 元素 → 丢失“取消勾选”事件；
• ❌ 仅比对当前选中 vs 上次选中 → 缺乏对单条记录“状态翻转”的原子追踪。

正确解法的核心在于：为每行数据注入可变的变更标记（如 isChanged），并在事件回调中显式更新它，而非依赖全局数组 diff。

✅ 正确实践：基于 isChanged 的增量状态管理

以下是一个精简、可复用的实现逻辑（已适配 DataTables v1.10+）：

function modalTable() {
  const getToken = localStorage.getItem("token");

  // 初始化待提交对象（符合后端约定结构）
  const payload = {
    draw: 1,
    length: 0,
    server: "argp",
    data: []
  };

  let allData = []; // 存储原始响应数据（含变更标记）

  $("#example_04").DataTable({
    ajax: {
      url: "http://192.168.03.30:8000/api/ipc/all",
      headers: { 'Authorization': 'Bearer ' + getToken },
      dataSrc: function (response) {
        // 关键：为每行添加 isChanged 标志，并深拷贝避免引用污染
        allData = response.data.map(item => ({
          ...item,
          isChanged: false // 初始未变更
        }));
        return allData;
      }
    },
    columns: [
      { data: "sf" },
      { data: "code" },
      { data: "subcode" },
      { data: "msgtext" },
      { data: "description" },
      {
        data: null,
        title: "Alarm/Event Setting",
        render: (data, type, row) => {
          const id = `customSwitch_${row.id}`;
          const checked = row.argp ? 'checked' : '';
          return `
            
              
              Selected
            `;
        },
        createdCell: (td, cellData, rowData, row, col) => {
          const $switch = $(td).find('input[type="checkbox"]');
          $switch.on('change', function () {
            // 1. 更新当前行状态与变更标记
            rowData.argp = this.checked;
            rowData.isChanged = true;

            // 2. 提取所有「已变更」的行（无论启/禁）
            const changedRows = allData.filter(item => item.isChanged);

            // 3. 构建 payload.data：只包含变更项，且按语义映射 enable 字段
            payload.data = changedRows.map(item => ({
              id: item.id,
              enable: item.argp // true → 启用，false → 禁用
            }));

            // 4. 更新 length 为变更项总数（非仅启用数！）
            payload.length = payload.data.length;

            console.log("提交载荷:", payload);
          });
        }
      }
    ]
  });
}

? 关键设计说明

⚠️ 注意事项

• 不要在 createdCell 外部重置 isChanged：若需支持“撤销变更”，应额外提供重置按钮并遍历 allData 清空 isChanged；
• 服务端需兼容 enable: false：确保后端能正确处理禁用指令（部分接口可能仅接收启用列表）；
• 性能提示：当表格行数 > 5000 时，建议改用 debounce 包裹 change 回调，避免高频触发。

✅ 总结

生成条件化提交对象的本质，不是“计算差异”，而是“标记差异”。通过为数据行注入可写状态字段（如 isChanged），配合事件驱动的即时标记，即可优雅、低开销地实现精准变更捕获。此模式可无缝迁移至 Vue/React 组件或任何支持行级状态管理的表格库中。