Como posso remover a barra de pesquisa e o rodapé adicionados pelo plugin jQuery DataTables?

Estou usando o jQuery DataTables .

Desejo remover a barra de pesquisa e o rodapé (mostrando quantas linhas são visíveis) adicionadas à tabela por padrão. Eu só quero usar este plugin para classificar, basicamente. Isso pode ser feito?

Para DataTables> = 1.10 , use:

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

Para DataTables <1.10 , use:

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

ou usando CSS puro:

.dataTables_filter, .dataTables_info { display: none; }

Confira http://www.datatables.net/examples/basic_init/filter_only.html para obter uma lista dos recursos a serem exibidos / ocultados.

O que você deseja é definir "bFilter" e "bInfo" para false;

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

Você também não pode desenhar o cabeçalho ou rodapé definindo sDom: http://datatables.net/usage/options#sDom

'sDom': 't' 

exibirá APENAS a tabela, sem cabeçalhos, rodapés ou qualquer coisa.

É discutido aqui: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

Se você estiver usando um filtro personalizado, talvez queira ocultar a caixa de pesquisa, mas ainda deseje ativar a função de filtro, então bFilter: falsenão é esse o caminho. Em dom: 'lrtp'vez disso, use o padrão 'lfrtip'. Documentação: https://datatables.net/reference/option/dom

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

Uma maneira rápida e suja é descobrir a classe do rodapé e ocultá-la usando jQuery ou CSS:

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

se você estiver usando omeroller:

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

Como disse @Scott Stafford, sDOMé a propriedade mais apropriada para mostrar, ocultar ou realocar os elementos que compõem as DataTables. Eu acho que o sDOMagora está desatualizado, com o patch atual esta propriedade está agora dom.

Essa propriedade também permite definir alguma classe ou ID para um elemento, para que você possa estilizar com mais facilidade.

Verifique a documentação oficial aqui: https://datatables.net/reference/option/dom

Este exemplo mostraria apenas a tabela:

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

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

no seu construtor de dados

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

Aqui você pode adicionar um sDomelemento ao seu código, a barra de pesquisa superior está oculta.

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

Isso pode ser feito simplesmente alterando a configuração:

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

Mas para esconder o rodapé vazio; este pedaço de código faz o truque:

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

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

});

Apenas um lembrete de que você não pode inicializar DataTableno mesmo <table>elemento duas vezes.

Se você encontrar o mesmo problema, poderá definir searchinge pagingfalse ao inicializar o DataTable no seu HTML <table>como este

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

Você pode escondê-los via css:

#example_info, #example_filter{display: none}

Você pode usar o atributo sDom. Código se parece com isso.

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

Esconde a caixa de pesquisa e pager.

A partir do DataTables 1.10.5, agora é possível definir opções de inicialização usando os atributos data5 * em HTML5.

- documentação dataTables: dados HTML5 - * atributos - opções de tabela

Então você pode especificar data-searching="false" data-paging="false" data-info="false"no table. Por exemplo, esta tabela não permitirá pesquisar, aplicar paginação ou mostrar o bloco de informações:

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

Veja um exemplo de trabalho em https://jsfiddle.net/jhfrench/17v94f2s/ .

A vantagem dessa abordagem é que ela permite que você tenha uma chamada de dataTables padrão (ou seja, $('table.apply_dataTables').DataTable()) enquanto pode configurar as opções de dataTables tabela por tabela.

Eu fiz isso atribuindo ao rodapé um id e, em seguida, estilizando usando 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>

estilizando usando css:

#FooterHidden{
   display: none;
}

Como mencionado acima, as maneiras não estão funcionando para mim.

Eu acho que a maneira mais simples é:

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

Você pode editar apenas a tabela que precisa modificar, sem alterar CSS ou JS comum.

Se você deseja apenas ocultar o formulário de pesquisa, por exemplo, porque possui filtros de entrada de coluna ou pode ser porque já possui um formulário de pesquisa CMS capaz de retornar resultados da tabela, tudo o que você precisa fazer é inspecionar o formulário e obter seu ID - (no momento em que escrevemos isso, parece que sim [tableid]-table_filter.dataTables_filter). Em seguida, basta [tableid]-table_filter.dataTables_filter{display:none;}reter todos os outros recursos das tabelas de dados.