DataTable含HTML标签列的独立搜索下拉框无法显示唯一值问题

你的核心问题在于：直接对包含<label>标签的原始HTML数据调用unique()时，哪怕文本内容完全一致，只要HTML结构（比如额外属性、空格）有差异，DataTable都会将它们判定为不同值；同时用split()提取文本的方式非常脆弱，一旦HTML结构变化就会失效。下面给你两种靠谱的解决方案：

方案一：在下拉框生成时提取纯文本并去重 #

直接修改initComplete里的列数据处理逻辑，先安全提取<label>的文本内容，再对纯文本进行去重排序：

var jQ = $.noConflict(true);
jQ('#table').DataTable({
  responsive: true,
  "paging": false,
  orderCellsTop: true,
  initComplete: function () {
    this.api().columns([0,1,2,3]).every( function () {
      var column = this;
      var select = jQ('<select><option value=""></option></select>')
        .appendTo( jQ("#table thead tr:eq(1) th").eq(column.index()).empty() )
        .on( 'change', function () {
          var val = jQ.fn.dataTable.util.escapeRegex( jQ(this).val() );
          // 调整搜索逻辑：匹配HTML中包含目标文本的项，而非精确匹配整个HTML字符串
          column
            .search( val ? val : '', false, true )
            .draw();
        } );
      jQ( select ).click( function(e) {
        e.stopPropagation();
      });

      // 关键修改：提取<label>纯文本并去重排序
      var textValues = column.data().map(function(d) {
        // 用jQuery解析HTML，安全获取文本并去除首尾空格
        return jQ(d).text().trim();
      }).toArray();

      // 使用Set自动去重，再转数组排序
      var uniqueSortedValues = [...new Set(textValues)].sort();

      // 添加去重后的选项到下拉框
      uniqueSortedValues.forEach(function(val) {
        select.append('<option value="' + val + '">' + val + '</option>');
      });
    } );
  },
  autoFill: true,
  dom: 'Blfrtip',
});

这个方案的优势是改动小，直接针对下拉框生成逻辑修复，同时避免了split()的脆弱性。

方案二：通过columns.render统一处理数据（更推荐） #

这种方式让DataTable的过滤、排序功能完全基于<label>的纯文本，从根源上解决问题，还能让表格的整体交互更符合用户预期：

var jQ = $.noConflict(true);
jQ('#table').DataTable({
  responsive: true,
  "paging": false,
  orderCellsTop: true,
  // 配置列数据的处理逻辑
  columnDefs: [
    {
      targets: [0,1,2,3], // 对目标列生效
      render: function(data, type) {
        if (type === 'display') {
          // 前端展示时保留原始HTML（即<label>标签）
          return data;
        } else {
          // 过滤、排序、提取数据时，返回<label>的纯文本
          return jQ(data).text().trim();
        }
      }
    }
  ],
  initComplete: function () {
    this.api().columns([0,1,2,3]).every( function () {
      var column = this;
      var select = jQ('<select><option value=""></option></select>')
        .appendTo( jQ("#table thead tr:eq(1) th").eq(column.index()).empty() )
        .on( 'change', function () {
          var val = jQ.fn.dataTable.util.escapeRegex( jQ(this).val() );
          column
            .search( val ? '^'+val+'$' : '', true, false )
            .draw();
        } );
      jQ( select ).click( function(e) {
        e.stopPropagation();
      });

      // 现在直接调用unique()即可，因为column.data()返回的已经是纯文本
      column.data().unique().sort().each( function ( d, j ) {
        select.append('<option value="'+d+'">'+d+'</option>');
      } );
    } );
  },
  autoFill: true,
  dom: 'Blfrtip',
});

推荐方案二的原因是：它不仅解决了下拉框的重复值问题，还让表格的搜索、排序功能不再受HTML标签干扰，用户体验更流畅。

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