Bootstrap Toggle在DataTables分页页失效，如何实现全表行切换？

这个问题我之前帮别人处理过好多次，核心原因其实是你用的表格（应该是DataTables吧？）分页时，非当前页的行根本不在DOM里，所以直接操作.js-bs-toggle只能影响当前可见的那些按钮。要实现全选/全不选所有分页的条目，得从数据层入手，而不是只搞DOM操作～

步骤1：给单个Toggle按钮绑定数据同步事件 #

先修改draw事件里的代码，给每个切换按钮绑定change事件，把状态同步到对应行的表格数据中，这样切换单个按钮时，状态能被持久化保存：

table.on('draw', function() {
  $('.js-bs-toggle').bootstrapToggle({ on: 'Yes', off: 'No' })
    .off('change') // 避免重复绑定事件
    .on('change', function() {
      // 获取当前按钮所在的表格行
      const row = table.row($(this).closest('tr'));
      // 把toggle的状态存到行数据里，这里用`isChecked`字段做示例
      row.data().isChecked = $(this).prop('checked');
      row.invalidate(); // 更新表格的缓存数据
    });
});

步骤2：改造全选按钮的点击事件 #

现在全选按钮点击时，要遍历表格的所有行数据（不管是否在当前页），统一设置状态，再刷新表格让DOM同步：

$('.js-toggle-all').on('click', function() {
  // 获取全选按钮点击后要切换到的目标状态
  const targetState = !$(this).prop('checked');
  
  // 遍历所有行数据，统一设置状态
  table.rows().every(function() {
    this.data().isChecked = targetState;
    this.invalidate();
  });
  
  // 刷新表格，保持当前分页位置不变，同步所有页的Toggle状态
  table.draw(false);
  
  // 同步全选按钮自身的状态
  $(this).bootstrapToggle(targetState ? 'on' : 'off');
});

步骤3：初始化时同步行数据到Toggle按钮 #

还要确保表格初始化（包括分页切换）时，Toggle按钮的状态和行数据一致，所以在draw事件里补充状态同步逻辑：

table.on('draw', function() {
  $('.js-bs-toggle').each(function() {
    const row = table.row($(this).closest('tr'));
    // 根据行数据设置Toggle的初始状态
    $(this).bootstrapToggle(row.data().isChecked ? 'on' : 'off');
  }).bootstrapToggle({ on: 'Yes', off: 'No' })
    .off('change')
    .on('change', function() {
      const row = table.row($(this).closest('tr'));
      row.data().isChecked = $(this).prop('checked');
      row.invalidate();
    });
});

额外优化：自动同步全选按钮状态 #

如果需要全选按钮的状态能自动匹配所有行的状态（比如所有行都选中时全选按钮自动变“on”），可以在draw事件最后加个检查逻辑：

table.on('draw', function() {
  // ... 上面的所有代码 ...
  
  // 检查所有行是否都被选中
  const allChecked = table.rows().every(function() {
    return this.data().isChecked === true;
  });
  $('.js-toggle-all').bootstrapToggle(allChecked ? 'on' : 'off');
});

这样改造后，全选按钮就能真正控制所有分页的条目状态了，不管切换到哪一页，Toggle按钮的状态都会和数据保持一致～

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