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


Respostas:


486

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

7
Tão bom quanto o comentário @antpaw é, e parece funcionar na maioria dos casos, não funciona se houver filtragem em cada coluna, como neste exemplo: datatables.net/release-datatables/extras/FixedColumns/… . Estar ciente!
Janis Peisenieks

@JanisPeisenieks O URL de exemplo está quebrado: datatables.net/extensions/fixedcolumns
antpaw

7
Não entendo por que isso é aceito, pois não responde à pergunta. O problema foi remover a barra de pesquisa e o rodapé, não desativando totalmente a pesquisa.
usar o seguinte comando

para remover completamente o rodapé tem de definir paging:falsee info:false, não apenaspaging:false
Mike Tyson D3ViD

1
adicionando ao comentário do @ user1563544, existe alguma maneira de apenas ocultar a barra de pesquisa e NÃO desativar a funcionalidade? (diferente de truques CSS?)
vignz.pie

88

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

@ Eric, obrigado, está trabalhando para mim, mas eu quero mostrar apenas "bPaginate", não quero mostrar "binfo" como posso implementar se eu fiz "bInfo" = false e "bPaginate" = true, então ambos estão mostrando
22617 amit

Na versão mais recente do DataTables é apenas{paging: false, info: false}
josemmo

42

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


2
Isso deve ser adicionado à resposta do antpaw. Isso oculta afetivamente as divs de espaço reservado para filtro e informações que ainda permanecem ao passar "bFilter": false, "bInfo": false.
TIBC-dev

Isso remove a paginação no rodapé. Não acho que seja uma boa prática.
Anirudh

1
Agora é chamado de 'dom' e você pode controlar muito mais com esta opção. Veja datatables.net/reference/option/dom
unkreativ

1
Esta é realmente a resposta correta. As outras respostas que envolvem ajustes de css e js são todos hacks. Se você deseja usar o DataTables corretamente, é assim que você faz isso. Como exemplo, se você deseja mostrar todos os bits e partes (paginação, comprimento da página etc.), exceto a caixa de pesquisa, você adicionaria uma dompropriedade com o valor de ltiprver datatables.net/reference/option/dom
onefootswill


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

7

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

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

4

se você estiver usando omeroller:

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

+1 Obrigado, isso me indicou a direção certa. Eu não queria esconder o cabeçalho também, então só queria o rodapé. As classes ui-corner-bl e ui-corner-br são aplicadas apenas ao rodapé, então usei uma para obter o wrapper do rodapé ........ $ (".ii-corner-bl"). hide ( );
Kevbo

4

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


3

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">'
 } );
} );

3

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'

});

2

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'
    ]
 });

1

Você pode escondê-los via css:

#example_info, #example_filter{display: none}

Não 'errado', apenas diferente. Depende se você deseja ocultar todas as instâncias (por classe, como na sua resposta) ou uma instância específica (por ID, como na minha).
GraphicDivine

1

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.


1

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.


0

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.


0

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.


0

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.