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

Question

尝试在我的Laravel数据表中的输入字段旁边添加搜索图标。我无法使用jquery更改输入字段旁边的文本“ Search：”并将其更改为搜索图标<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>

Answer 1

DataTable是Jquery库。我不明白为什么你不能使用jQuery的。要更改搜索标签，请遵循this link

---

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

Answer 2

您可以通过以下方法实现此目的：首先用空字符串替换文本节点（“搜索”），然后在onput标签之前附加图标i，请参见以下片段

$(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>