Responsive Datatable：点击响应式下拉列表项获取表头data-colid属性的技术问询

这里有两个实用的方案，帮你实现需求：

方案1：自定义响应式细节渲染，直接给

添加data-colid #

这个方案在初始化DataTable时，自定义响应式区域的渲染逻辑，生成<li>时直接把对应表头的data-colid附加到元素上，后续点击时可以直接读取。

$("#your-table-id").DataTable({
  responsive: true,
  responsive: {
    details: {
      renderer: function(api, rowIdx, columns) {
        let html = '<ul class="dtr-details">';
        
        columns.forEach(col => {
          // 通过列索引获取对应表头的data-colid
          const colId = api.column(col.column).header().getAttribute("data-colid");
          html += `
            <li data-dt-row="${rowIdx}" data-dt-column="${col.column}" data-colid="${colId}">
              <span class="dtr-title">${col.title}</span>
              <span class="dtr-data">${col.data}</span>
            </li>
          `;
        });
        
        html += "</ul>";
        return html;
      }
    }
  }
});

之后点击<li>时，直接通过data方法获取即可：

$(".dtr-details").on("click", "li", function() {
  const colId = $(this).data("colid");
  console.log("对应表头的data-colid:", colId);
});

方案2：点击时通过列索引映射到表头属性 #

如果不想修改原有响应式渲染逻辑，可以在点击事件中，利用DataTable的API通过列索引找到对应表头元素，再读取data-colid：

// 绑定点击事件（用委托确保动态生成的元素也能触发）
$(document).on("click", ".dtr-details li", function() {
  const table = $("#your-table-id").DataTable();
  const columnIndex = $(this).data("dt-column");
  // 获取对应表头元素
  const headerEl = table.column(columnIndex).header();
  // 读取data-colid属性
  const colId = headerEl.getAttribute("data-colid");
  
  // 这里可以使用拿到的colId做后续操作
  console.log("对应表头的data-colid:", colId);
});

注意事项 #

• 记得把代码中的#your-table-id替换成你实际的表格ID
• 确保DataTable的版本支持responsive.details.renderer和column().header()API（大部分现代版本都支持）

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