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

Question

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

Таким образом, вы можете указать 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 по таблице.

Answer 3

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

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

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

Answer 4

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

#example_info, #example_filter{display: none}

Answer 5

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

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

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

Answer 6

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

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

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

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;
}

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