DataTables中Bootstrap开关组件渲染异常（复选框为null）的解决方法

在Laravel项目中使用DataTables渲染表格时，发现倒数第二列的Bootstrap开关组件复选框始终为null，怀疑是DataTables与Bootstrap的兼容性问题，使用的DataTables代码如下：

var dt_filter = dt_filter_table.DataTable({
    ajax: {
        url: '/banner/data',
        error: function (xhr, error, thrown) {
            console.error('DataTables AJAX error:', error);
            console.log('XHR response:', xhr.responseText);
        }
    },
    aoColumns: [
        { "data": "title" },
        { "data": "created_at" },
        { "data": 'updated_at' },
        {
            "mData": "id",
            "mRender": function (data, type, row) {
                if (data) {
                    return '<div class="col-sm-6 p-4"><input type="checkbox" class="switch-input" /><span class="switch-toggle-slider"><span class="switch-on" ></span><span class="switch-off"></span></span></div>'
                }
            }
        },
        {
            "mData": "id",
            "mRender": function (data, type, row) {
                return "<div class='d-flex justify-content-center'><a class='btn btn-primary me-2' href='banner/detail/" + data + "'>Edit</a><a class='btn btn-danger mr-2 text-white' onclick='deleteConfirm(" + data + ")'>Delete</a></div>";
            }
        }
    ],
    orderCellsTop: true,
    dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>><"table-responsive"t><"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>'
});

这不是DataTables和Bootstrap的兼容性问题，核心是你没有为复选框绑定数据状态，也没有在DataTables动态生成DOM后初始化开关组件，具体修复步骤如下：

• 1. 绑定数据到复选框
  从后端返回的row数据中获取开关状态（假设后端返回status字段表示启用/禁用），为复选框设置checked属性，并添加data-id关联banner的ID，方便后续操作：

  {
      "mData": "id",
      "mRender": function (data, type, row) {
          // 根据后端返回的row.status设置复选框状态
          const checked = row.status ? 'checked' : '';
          return `<div class="d-flex align-items-center p-2">
                      <input type="checkbox" class="switch-input" data-id="${data}" ${checked} />
                      <span class="switch-toggle-slider">
                          <span class="switch-on"></span>
                          <span class="switch-off"></span>
                      </span>
                  </div>`;
      }
  }
  

• 2. 初始化开关组件并绑定事件
  DataTables每次绘制表格（比如分页、搜索后）都会重新生成DOM，需要在draw.dt事件中重新初始化开关组件并绑定状态变更事件：

  // 监听DataTables绘制完成事件
  dt_filter.on('draw.dt', function() {
      $('.switch-input').each(function() {
          // 如果你使用的是官方Bootstrap Switch插件，先初始化
          // $(this).bootstrapSwitch();
          
          // 绑定状态变更事件，同步到后端
          $(this).off('change').on('change', function() {
              const bannerId = $(this).data('id');
              const newStatus = $(this).is(':checked') ? 1 : 0;
              
              // 发送AJAX请求更新后端状态
              $.ajax({
                  url: '/banner/update-status',
                  method: 'POST',
                  data: {
                      _token: '{{ csrf_token() }}', // Laravel需要CSRF令牌
                      id: bannerId,
                      status: newStatus
                  },
                  success: function(res) {
                      // 处理成功响应
                  },
                  error: function(xhr) {
                      console.error('更新状态失败:', xhr.responseText);
                      // 失败后恢复原状态
                      $(this).prop('checked', !newStatus);
                  }
              });
          });
      });
  });
  

• 3. 调整表格内布局
  原代码中的col-sm-6类不适合表格单元格布局，容易导致组件显示异常，换成d-flex align-items-center这类适合表格内的布局类，确保开关组件正常显示。

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