Изменение элемента DOM Позиция поисковой системы в datatables

На самом деле я новичок в плагине jQuery datatables.

Я подключил плагин к моим таблицам, используя этот метод, используя этот код.

$(document).ready(function() 

         $('#table_id').dataTable({

         });
 });

Теперь я хочу, чтобы datatables предоставил текстовое поле, в которое мы можем ввести нашу строку фильтра, и результаты будут отфильтрованы.

Итак, я хочу использовать мой существующий текстовый файл для этой цели. Я не хочу добавлять новое текстовое поле в пользовательский интерфейс. Поэтому я прошел через эту ссылку

http://datatables.net/examples/basic_init/dom.html

Но я не понимаю. Возможно ли использовать существующее текстовое поле. Пожалуйста, посоветуйте

См., что у меня была такая ситуация, прежде чем реализовать эти данные datatables

Теперь, когда я применяю этот плагин datatables Новое текстовое поле добавляется для поиска. Я не хочу нового текстового поля. Я хочу, чтобы существующее текстовое поле реализовало функциональность поиска.

Ответы

Ответ 1

Это очень просто. Сначала вы должны скрыть окно поиска по умолчанию:

.dataTables_filter {
   display: none;
}

Пример вашего собственного разработанного окна поиска, размещенного где-то в HTML:

<input type="text" id="searchbox">

script для поиска/фильтрации при вводе в поле поиска

$("#searchbox").keyup(function() {
   dataTable.fnFilter(this.value);
});

рабочая демонстрация → http://jsfiddle.net/TbrtF/

Если вы используете DataTables 1.10, JS должен выглядеть так:

$("#searchbox").on("keyup search input paste cut", function() {
   dataTable.search(this.value).draw();
});

Ответ 2

Чтобы удалить параметры фильтра, вы можете использовать css, как указано в других ответах, или вы можете удалить его при инициализации данных, используя:

$("#table").dataTable({"bFilter": false}); //disables filter input

или с помощью атрибута sDom:

 "sDom": '<"H"lr>t<"F"ip>' //when bJuery is true

См. здесь http://datatables.net/usage/options#sDom для получения дополнительных параметров.

Теперь, когда вы используете свое собственное текстовое поле в качестве поля фильтра, просто присоедините к нему обработчик keypress и используйте параметр fnFilter следующим образом:

$(document).ready(function() 

     oTable = $('#table_id').dataTable({
         "sDom": '<"H"lr>t<"F"ip>' 
     });
     $('#myInputTextField').keypress(function(){
         oTable.fnFilter( $(this).val() );
     });
 });

Ответ 3

Вы можете определить новый элемент newSearchPlace, чтобы внутри фильтра поиска таблицы данных:

<div id="newSearchPlace"></div>

Затем поместите фильтр поиска в это новое место:

$("#newSearchPlace").html($(".dataTables_filter"));

Ответ 4

вы можете легко изменить стиль ввода с помощью css

в css Файл:

.dataTables_filter input {
     background: blue;
}

С Javascript

$(".dataTables_filter input").css({ "background" :"blue" });

Попробуйте, вставив это на консоль.

Ответ 5

Да, вы можете сделать класс в своем CSS, например:

.pull-left{
    float: left !important;
}

а затем добавьте этот класс в datatable div поиска с помощью jquery или javascript.

Пример:

$('.dataTables_filter').addClass('pull-left');

убедитесь, что ваш script находится в верхней части вашего html.

Ответ 6

Для актуальной версии в декабре 2018 года (v1.10.19) вам необходимо выполнить следующие шаги:

Скрыть окно поиска по умолчанию (CSS):
```
.dataTables_filter { display: none; }
```
Добавить новый фильтр в нужное место (HTML)
```
Search:<br><input type="text" id="searchFilter">
```

После функции инициализации DataTables вам нужно написать свою функцию поиска (JS):

$(document).ready(function() {
   var table = $('#example').DataTable();

$('#searchFilter').on( 'keyup', function () {
   table.search( this.value ).draw();
} );

Примечание: fnfilter устарел, поэтому используйте search(), но search() не перерисовывает таблицу, поэтому вам также нужно использовать draw().

Ответ 7

Начиная с DataTables 1.10, свойство dom может быть добавлено к инициализации. Хотя это довольно сложно освоить, его можно использовать для обертывания всех объектов DataTables в элементах <div> для стилизации встроенных элементов управления таблицей.

Свойство dom подобное следующему, обернет панель поиска по умолчанию выбранным <div>, который можно использовать для перемещения влево (где f - панель фильтрации/поиска, а t - таблица:

$('#example').dataTable( {
  "dom": '<"pull-left" f><t>'
} );

Выход:

<div class="pull-left">
  <div id="example_filter" class="dataTables_filter"><label><input type="search" aria-controls="example"></label></div>
</div>
<div>
  <table id="example" class="table dt-responsive nowrap dataTable no-footer dtr-inline" style="width: 100%;" role="grid">
</div>

Больше информации: опция DataTables dom