Як я можу видалити рядок пошуку та колонтитул пошуку, доданий плагіном jQuery DataTables?

Я використовую jQuery DataTables .

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

Для таблиць даних> = 1,10 використовуйте:

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

Для таблиць даних <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();

якщо ви використовуєте тематичний ролик:

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

Як зазначає @Scott, Стаффорд sDOMє найбільш сприятливим властивістю показувати, приховувати або переміщувати елементи, які складають таблиці даних. Я думаю, що sDOMтепер застаріла, фактична виправка ця властивість є зараз dom.

Ця властивість дозволяє також встановити деякий клас або id для елемента, щоб ви могли простіше стилізувати.

Перегляньте офіційну документацію тут: 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і pagingпомилково, ініціалізуючи 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 тепер можна визначити параметри ініціалізації за допомогою атрибутів HTML5 data- *.

- документація данихTables: 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/ .

Перевага такого підходу полягає в тому, що він дозволяє вам мати стандартний виклик таблиць даних (тобто $('table.apply_dataTables').DataTable()), одночасно налаштовуючи параметри данихTables таблиці за столом.

Я зробив це, призначивши колонтитул ідентифікатора, а потім створивши стилі за допомогою 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;}збережіть всі інші особливості таблиць даних.