响应式DataTables折叠后如何修改单元格/列默认内容？

这个问题我之前也碰到过，本质是DataTables的Responsive扩展在处理折叠行时的渲染机制导致的：当窗口缩小触发行折叠，或者展开折叠的细节行时，Responsive会重新渲染单元格内容，这时候它会直接使用defaultContent里的原始HTML，完全忽略你在createdRow回调中做的修改（比如绑定数据、添加事件监听）。

下面给你两种可行的解决方案，推荐第一种，更简洁可靠：

方案一：用columns.render替代defaultContent + createdRow #

columns.render函数会在每次单元格渲染时执行（包括Responsive生成折叠细节行的时候），所以可以直接在这里动态生成带自定义数据或结构的内容，配合事件委托处理交互，完美避免内容重置的问题。

代码示例 #

<!-- HTML表格结构 -->
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Actions</th>
    </tr>
  </thead>
</table>

$(document).ready(function() {
  const table = $('#example').DataTable({
    responsive: true,
    // 假设你的数据源是AJAX接口
    ajax: {
      url: '/your-data-api',
      dataSrc: ''
    },
    columns: [
      { data: 'name' },
      { data: 'position' },
      { data: 'office' },
      { 
        // 用render动态生成内容，而不是defaultContent
        render: function(data, type, row) {
          // 直接把行数据嵌入到HTML元素中
          return `<button class="btn btn-sm btn-primary action-btn" data-id="${row.id}">操作</button>`;
        }
      }
    ]
  });

  // 用事件委托处理按钮点击，不管按钮是初始渲染还是动态生成的都能生效
  $('#example').on('click', '.action-btn', function() {
    const rowId = $(this).data('id');
    console.log(`触发操作，行ID：${rowId}`);
    // 这里写你的业务逻辑，比如弹窗、AJAX请求等
  });
});

方案二：监听Responsive的responsive-display事件 #

如果你一定要保留defaultContent和createdRow的写法，可以通过监听Responsive的responsive-display事件，在折叠行展开时重新对内容进行修改。这个事件会在Responsive切换行的显示状态（折叠/展开）时触发。

代码示例 #

$(document).ready(function() {
  const table = $('#example').DataTable({
    responsive: true,
    ajax: {
      url: '/your-data-api',
      dataSrc: ''
    },
    columns: [
      { data: 'name' },
      { data: 'position' },
      { data: 'office' },
      { 
        defaultContent: '<button class="btn btn-sm btn-primary action-btn">操作</button>'
      }
    ],
    createdRow: function(row, data, dataIndex) {
      // 初始渲染行时，给按钮绑定数据
      $(row).find('.action-btn').data('id', data.id);
    }
  });

  // 监听Responsive的显示状态变化事件
  table.on('responsive-display', function(e, datatable, row, showHide) {
    if (showHide) {
      // 当行展开时，重新给按钮设置数据
      const rowData = row.data();
      row.node().querySelector('.action-btn').dataset.id = rowData.id;
    }
  });

  // 同样用事件委托处理点击
  $('#example').on('click', '.action-btn', function() {
    const rowId = $(this).data('id');
    console.log(`触发操作，行ID：${rowId}`);
  });
});

总结 #

优先选择方案一，因为它从根源上解决了渲染时内容重置的问题，代码更简洁，也不需要额外监听事件。事件委托的方式也能避免重复绑定事件的问题，不管是初始行还是动态生成的折叠细节行，交互都能正常生效。

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