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

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

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

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

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

Для DataTables <1.10 используйте:

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

или используя чистый CSS:

.dataTables_filter, .dataTables_info { display: none; }

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

То, что вы хотите, это установить "bFilter" и "bInfo" в false;

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

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

'sDom': 't' 

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

Некоторые обсуждаются здесь: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

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

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

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

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

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

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

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

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

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

В этом примере будет показана только таблица:

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

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

в вашем конструкторе данных

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

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

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

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

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

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

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

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

});

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

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

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

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

#example_info, #example_filter{display: none}

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

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

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

Начиная с DataTables 1.10.5, теперь можно определять параметры инициализации, используя атрибуты data5 * HTML5.

- документация по таблицам данных: атрибуты данных HTML5 - параметры таблицы

Таким образом, вы можете указать data-searching="false" data-paging="false" data-info="false"на table. Например, эта таблица не позволяет искать, применять пейджинг или показывать информационный блок:

<table id="example" class="display" width="100%" data-searching="false" data-paging="false" data-info="false">
    <thead>
        <tr>
            <th>Name</th>
            <th data-orderable="false">Avatar</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

Смотрите рабочий пример на https://jsfiddle.net/jhfrench/17v94f2s/ .

Преимущество этого подхода заключается в том, что он позволяет использовать стандартный вызов dataTables (т. Е. $('table.apply_dataTables').DataTable()), В то же время имея возможность настраивать параметры dataTables по таблицам.

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

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

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

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

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

Если вы хотите скрыть форму поиска, например, потому что у вас есть фильтры ввода столбцов, или, возможно, потому что у вас уже есть форма поиска CMS, способная возвращать результаты из таблицы, тогда все, что вам нужно сделать, - это проверить форму и получить ее идентификатор - (на момент написания этого он выглядит так [tableid]-table_filter.dataTables_filter). Затем просто [tableid]-table_filter.dataTables_filter{display:none;}сохраните все другие функции таблиц данных.