Как удалить панель поиска и нижний колонтитул, добавленные плагином jQuery DataTables?

Question

Я использую jQuery DataTables.

Я хочу удалить панель поиска и нижний колонтитул (показывая, сколько строк там видно), которое добавлено в таблицу по умолчанию. Я просто хочу использовать этот плагин для сортировки, в основном. Это можно сделать?

Answer 1

Для DataTables> = 1,10, используйте:

$('table').dataTable({searching: false, paging: false}); 

Для DataTables < 1,10, использование:

$('table').dataTable({bFilter: false, bInfo: false}); 

или с использованием чистого CSS:

.dataTables_filter, .dataTables_info { display: none; } 

Answer 2

быстрый и грязный способ это выяснить класс колонтитула и скрыть его с помощью JQuery или CSS:

$(".dataTables_info").hide(); 

Answer 3

Вы можете скрыть их с помощью CSS:

#example_info, #example_filter{display: none} 

Answer 4

если вы используете ThemeRoller:

.dataTables_wrapper .fg-toolbar { display: none; } 

Answer 5

Заканчивать http://www.datatables.net/examples/basic_init/filter_only.html для списка функций в показать спрятать.

Вы хотите установить «bFilter» и «bInfo» в false;

$(document).ready(function() { 
    $('#example').dataTable({ 
     "bPaginate": false, 
     "bFilter": false, 
     "bInfo": false 
       }); 
}); 

Answer 6

Вы также можете не рисовать колонтитулы на всех, установив sDom: http://datatables.net/usage/options#sDom

'sDom': 't' 

покажет только таблицу, ни колонтитулы или что-нибудь.

Он обсудил некоторые здесь: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

Answer 7

Я сделал это, назначая сноску идентификатора, а затем укладку с помощью CSS:

<table border="1" class="dataTable" id="dataTable_${dtoItem.key}" > 
    <thead> 
     <tr> 
      <th></th> 

     </tr> 
    </thead> 
<tfoot> 
    <tr> 
      <th id="FooterHidden"></th> 
    </tr> 
</tfoot> 
<tbody> 

    <tr> 

       <td class="copyableField"></td> 

    </tr> 
</tbody> 
</table> 

затем укладка с помощью CSS:

#FooterHidden{ 
    display: none; 
} 

Как и выше упомянутые способы не работают для меня.

Answer 8

Вы можете использовать атрибут sDom. Код выглядит примерно так.

$(document).ready(function() { 
    $('#example').dataTable({ 
     'sDom': '"top"i' 
       }); 
}); 

İt скрывает поиск и пейджер.

Answer 9

Здесь вы можете добавить свой код в код sDom, вверху находится панель поиска.

$(document).ready(function() { 
    $('#example').dataTable({ 
"sDom": '<"top">rt<"bottom"flp><"clear">' 
}); 
}); 

Answer 10

<script> 
$(document).ready(function() { 
    $('#nametable').DataTable({ 
     "bPaginate": false, 
     "bFilter": false, 
     "bInfo": false 
    }); 
}); 
</script> 

в вашем DataTable конструктору

https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box

Answer 11

По словам @Scott Стаффорд sDOM является наиболее apropiated свойство, чтобы показать, скрыть или переместить элементы, которые составляют DataTables. Я думаю, что sDOM теперь устарел, с фактическим патчем это свойство теперь dom.

Это свойство позволяет также установить некоторый класс или идентификатор элемента, чтобы упростить стильную стильную работу.

Проверьте официально документацию здесь: https://datatables.net/reference/option/dom

Этот пример покажет только таблицу:

$('#myTable').DataTable({ 
    "dom": 't' 
}); 

Answer 12

Если вы используете пользовательский фильтр, вы можете захотеть, чтобы скрыть окно поиска, но все еще хотите, чтобы включить функция фильтра, поэтому bFilter: false - это не так. Вместо этого используйте dom: 'lrtp', по умолчанию 'lfrtip'. Документация: https://datatables.net/reference/option/dom

Answer 13

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

$('table').dataTable({ 
     paging: false, 
     info: false 
}); 

Но чтобы скрыть пустой колонтитул; этот кусок кода делает трюк:

$('table').dataTable({ 
     paging: false, 
     info: false, 

     //add these config to remove empty header 
     "bJQueryUI": true, 
     "sDom": 'lfrtip' 

}); 

Answer 14

Я думаю, что самый простой способ:

<th data-searchable="false">Column</th> 

Вы можете редактировать только таблицу, вы должны изменить, без изменения общего CSS или JS.

Answer 15

var table = $("#datatable").DataTable({ 
    "paging": false, 
    "ordering": false, 
    "searching": false 
}); 

Answer 16

Просто напоминание, вы не можете инициализировать DataTable на том же <table> элемент дважды.

Если вы столкнулись с таким же вопросом, то вы можете установить searching и paging ложь при инициализации DataTable на вашем HTML <table> как этого

$('#tbl').DataTable({ 
    searching: false, 
    paging: false, 
    dom: 'Bfrtip', 
    buttons: [ 
     'copy', 'csv', 'excel', 'pdf', 'print' 
    ] 
});