DataTables - Как удалить верхнюю панель поиска? [Дубликат]

Просмотрите 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 код, верхняя панель поиска скрыта.

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

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

#example_info, #example_filter{display: none}

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

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

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

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

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

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

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

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

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

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

<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

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

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

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

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

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

'sDom': 't' 

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

Здесь обсуждается следующее: http://www.datatables.net/forums/discussion/2722/how-to-hide- пустые заголовки и-сноска / p1

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

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

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

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

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

});

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

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

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

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

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