Bootstrap Table插件：多表头下如何让列选择显示第一行列名？

可以实现，具体操作方法如下：

• 手动指定列的title属性
  初始化Bootstrap Table时，给每一列明确设置title属性为第一行的表头内容，替代插件自动读取的表头文本。示例代码：

  $('#table').bootstrapTable({
    columns: [
      {
        field: 'id',
        title: 'ID', // 这里填写第一行的实际列名
        // 其他配置项
      },
      {
        field: 'name',
        title: '名称',
        // 其他配置项
      }
    ],
    showColumns: true
  });
  

• 使用headerFormatter回调修改显示文本
  若通过HTML表格初始化，可借助headerFormatter函数，强制返回第一行表头的内容作为列选择列表的显示文本。示例代码：

  $('#table').bootstrapTable({
    showColumns: true,
    headerFormatter: function(value, row, index) {
      // 获取第一行对应列的文本内容并返回
      return $('thead tr:first th').eq(index).text();
    }
  });
  

• 调整HTML表头结构
  将第一行表头设置为带data-field和data-title属性的<th>，第二行表头使用普通<th>标签。插件会优先读取data-title或第一行的文本作为列选择的显示内容。示例HTML结构：

  <table id="table">
    <thead>
      <tr>
        <th data-field="id" data-title="ID">ID</th>
        <th data-field="name" data-title="名称">名称</th>
      </tr>
      <tr>
        <th>附加数据1</th>
        <th>附加数据2</th>
      </tr>
    </thead>
    <!-- 表格主体内容 -->
  </table>
  

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