Настроить стиль входного фильтра в datatable

Question

Попытка добавить значок поиска рядом с полем ввода в моем Laravel Datatable.Я не могу использовать 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>

Answer 1

Этого можно добиться, сначала заменив текстовый узел («поиск») пустой строкой, а затем добавьте значок i перед тегом onput, см. Фрагмент ниже

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

Answer 2

DataTable - это библиотека Jquery.Я не понимаю, почему вы не можете использовать jquery для этого.Для изменения метки поиска следуйте этой ссылке

---

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