Как создать определенную структуру HTML для панели поиска datatables?

Question

Я пытаюсь добавить эту структуру в строку поиска:

<div class="app-search">
  <form>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search...">
      <span class="mdi mdi-magnify"></span>
      <div class="input-group-append">
          <button class="btn btn-primary" type="submit">Search</button>
      </div>
    </div>
  </form>
</div>

На самом деле я пытался добавить этот код в datatables:

$("#example-datatable").DataTable({
    keys: !0,
    "dom": '<"input-group"f><"#toolbar.dt-box">lrtip',

но результат совершенно неверный, как вы можете видеть из этого JSFIDDLE .

Окончательный результат должен быть таким:

Что я сделал не так?

Answer 1

Я не могу объяснить, что не так в вашем коде, но я могу поделиться своими решениями для этого. Я надеюсь, что это приведет вас к правильному решению.

Добавив это в свой объект таблицы, вы можете удалить «Поиск:» перед вводом:

let table = $('#example').DataTable( {
 language: { search: "" }
});

Вы можете запустить эту функцию, чтобы иметь возможность изменять заполнитель ввода:

$('.dataTables_filter input').attr("placeholder", "SEARCH");

Вы также можете заменить все элементы ввода, используя эту функцию:

$('.dataTables_filter label').html('<input type="search" class="" placeholder="I am the new input" aria-controls="example">');

https://jsfiddle.net/0da982ue/9/