如何让Font Awesome图标支持DataTables搜索框按颜色筛选？

当然可以搞定！DataTables本身就支持自定义搜索逻辑，我们有两种靠谱的方式实现你要的按颜色搜索图标的效果，看你需求选就行：

方案一：添加隐藏搜索关键词（简单易上手） #

DataTables默认会搜索单元格内的文本内容，我们可以在包含图标的单元格里加一个隐藏的文本标签，把颜色关键词（比如red、green）放进去，这样搜索时就能匹配到对应的行，完全不用写额外的JS逻辑。

修改你的HTML代码，给每个图标单元格加上隐藏的关键词：

<td>
  <!-- 隐藏的搜索关键词，仅用于DataTables搜索，用户看不到 -->
  <span style="position:absolute; width:1px; height:1px; overflow:hidden;">red yellow green</span>
  <i class="fa fa-circle red_star"></i>
  <i class="fa fa-circle yellow_star"></i>
  <i class="fa fa-circle green_star" aria-hidden="true"></i>
</td>
<td>
  <span style="position:absolute; width:1px; height:1px; overflow:hidden;">gray</span>
  <span class='gray_star' id='<?= $p->id?>' ><i class="fa fa-star"></i></span>
</td>

这里用内联样式把关键词隐藏起来（你也可以用Bootstrap的sr-only类，效果一样）。之后正常初始化DataTables就行，输入"red"就会自动筛选出包含红星的行，输入"green"则显示绿星行，完全符合你的需求。

方案二：自定义DataTables搜索过滤器（更灵活） #

如果不想修改现有HTML，我们可以直接扩展DataTables的搜索功能，让它直接识别图标元素的类名。这种方式适合已经写好页面，不想动HTML结构的场景。

初始化DataTables时添加自定义搜索逻辑：

$(document).ready(function() {
  // 初始化表格，替换成你的表格ID
  var myTable = $('#your-table-id').DataTable();

  // 添加自定义搜索过滤器
  $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
    var searchText = $('.dataTables_filter input').val().toLowerCase().trim();
    
    // 搜索框为空时，显示所有行
    if (!searchText) return true;

    // 获取当前行的DOM元素
    var currentRow = myTable.row(dataIndex).node();
    var matchFound = false;

    // 遍历行内所有图标，检查类名是否包含搜索关键词
    $(currentRow).find('i.fa').each(function() {
      var iconClasses = $(this).attr('class').split(' ');
      // 逐个检查类名，比如red_star会匹配到"red"
      for (var cls of iconClasses) {
        if (cls.includes(searchText)) {
          matchFound = true;
          return false; // 找到匹配就终止遍历
        }
      }
    });

    return matchFound;
  });

  // 监听搜索框输入，触发表格重绘
  $('.dataTables_filter input').on('keyup change', function() {
    myTable.draw();
  });
});

小提示： #

• 把#your-table-id替换成你实际的表格ID；
• 如果需要精确匹配（比如只搜"red"时不匹配"red_star"），可以把cls.includes(searchText)改成cls === searchText，不过根据你的需求，包含匹配刚好合适；
• 这个逻辑会检查行内所有Font Awesome图标，所以如果有其他图标也会被纳入搜索范围，你可以调整find('i.fa')的选择器来缩小范围，比如改成find('i.fa-circle, i.fa-star')。

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