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

Ответ 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; }

Ответ 2

Просмотрите http://www.datatables.net/examples/basic_init/filter_only.html список функций для показа/скрытия.

Вы хотите установить "bFilter" и "bInfo" в false:

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

Ответ 3

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

'sDom': 't' 

отобразит JUST таблицу, ни верхние или нижние колонтитулы, ни что-нибудь.

Обсуждалось здесь: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

Ответ 4

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

Ответ 5

Быстрый и грязный способ - узнать класс нижнего колонтитула и скрыть его с помощью jQuery или CSS:

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

Ответ 6

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

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

Ответ 7

<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

Ответ 8

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

Ответ 9

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

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

Ответ 10

Это можно сделать, просто изменив конфигурацию:

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

Но скрыть пустой нижний колонтитул; этот фрагмент кода делает трюк:

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

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

});

Ответ 11

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

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

Он скрывает окно поиска и пейджера.

Ответ 12

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

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

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

В этом примере будет отображаться только таблица:

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

Ответ 13

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

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

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

Ответ 14

Вы можете скрыть их через css:

#example_info, #example_filter{display: none}

Ответ 15

Я сделал это, назначив нижний колонтитул id, а затем стиль с помощью 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;
}

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

Ответ 16

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

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

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