Как создать определенную структуру html для панели поиска таблиц данных?

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

<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.

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

enter image description here

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

0
0
139
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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/

не могли бы вы предоставить скрипку?

Dillinger 12.09.2018 21:42

настройка верна, но теперь панель поиска не работает, то же самое в вашей скрипке

Dillinger 13.09.2018 09:23

Извините, я этого не заметил. Обновил ссылку на рабочую. Вам нужно добавить туда несколько стилей.

Adam 13.09.2018 09:49

Другие вопросы по теме