自定义数据表中输入过滤器的样式

Posted 2023-03-14

【中文标题】自定义数据表中输入过滤器的样式

【英文标题】：Customize style of input filter in datatable

【发布时间】：2019-03-12 05:22:18

【问题描述】：

尝试在我的 Laravel 数据表中的输入字段旁边添加搜索图标。我无法使用 jquery 更改输入字段旁边的文本“搜索：”并将其更改为搜索图标 <i class="icon-search"></i>，因为此标签没有标签，因此很难选择它。我怎样才能做到这一点？

html：

<div id="orders-table_filter" class="dataTables_filter">
  <label>Search:<input type="search" class="" placeholder="" aria-controls="orders-table">
  </label>
</div>

【参考方案1】：

DataTable 是 Jquery 库。我不明白为什么你不能为此使用 jquery。如需更改搜索标签，请关注this link

---

language: 
  search: '<i class="icon-search"></i>'

【讨论】：

@gubera，我真的认为您应该将解决方案添加到答案中。链接并不能说明太多...

【参考方案2】：

您可以通过首先用空字符串替换文本节点（“搜索”）然后在输入标记之前附加图标 i 来实现此目的，请参见下面的 sn-p

$(function() 
  $input = $(".dataTables_filter").find("[type='search']");

  $input.parent().contents().filter(function() 
    return this.nodeType == 3 // here means return all node type text (textNode)
  ).each(function() 
    this.textContent = this.textContent.replace('Search:', '');
  );
  
  $input.before($("<i class='icon-search'></i>"));

)

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="orders-table_filter" class="dataTables_filter">
  <label>Search:<input type="search" class="" placeholder="" aria-controls="orders-table">
  </label>
</div>

【讨论】：

感谢您的努力。我通过使用其他答案找到了更直接的方法。