DataTable: oculte o menu suspenso Mostrar entradas, mas mantenha a caixa Pesquisar

129

É possível ocultar o menu suspenso Mostrar entradas, mas manter a caixa Pesquisar no DataTable? Quero sempre exibir 10 linhas com paginação na parte inferior junto com a caixa de pesquisa, mas não quero exibir o menu suspenso Mostrar entradas.

FaisalKhan
fonte

Respostas:

288

Você pode encontrar mais informações diretamente neste link: http://datatables.net/examples/basic_init/filter_only.html

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

Espero que ajude !

EDIT: Se você é preguiçoso, "bLengthChange": false, é o que você precisa alterar :)

PERPO
fonte
56

Se estiver usando Datatable> 1.1.0, a lengthChangeopção é o que você precisa, conforme abaixo:

$('#example').dataTable( {
  "lengthChange": false
});
Jimmy Obonyo Abor
fonte
28
"searching": false,   // Search Box will Be Disabled

"ordering": false,    // Ordering (Sorting on Each Column)will Be Disabled

"info": true,         // Will show "1 to n of n entries" Text at bottom

"lengthChange": false // Will Disabled Record number per page
Niv
fonte
19

Esta é a resposta chave para esta postagem "bLengthChange": false,ocultar o menu suspenso de entradas


fonte
9

Para DataTables <= 1.9, a resposta do @perpo

$('#example').dataTable({
    "bLengthChange": false
});

funciona bem, mas para 1.10 ou superior, tente o seguinte:

$('#example').dataTable({
    "dom": 'ftipr'
}); 

onde deixamos de fora lo "controle de entrada de alteração de comprimento"

1.9 Documentos

1.10 Documentos

Michal Frystacky
fonte
isso é melhor porque remove a div holdint o elemento com o elemento bLenghChange desapareceu, mas há espaço em branco. obrigado !
Hamid Salari 19/07
9

Eu resolvo assim. Use o bootstrap 4

    $(document).ready(function () {
        $('#table').DataTable({
            "searching": false,
            "paging": false,
            "info": false
        });
    });

cdn js:

cdn css:

shades3002
fonte
1
Isso funciona para tabelas de dados em 2018, nenhum dos outros funcionou.
Dammeul 18/10/19
8

sDom: "Tfrtip" ou por meio de um retorno de chamada:

"fnHeaderCallback": function(){
    $('#YOURTABLENAME-table_length').hide();
}
cnizzardini
fonte
3

Para desabilitar o rótulo "Mostrar entradas", adicione o código dom: 'Bfrtip' ou você pode adicionar "bInfo": false

$('#example').DataTable({
    dom: 'Bfrtip'
})
chitranjan srivastva
fonte
2

Você pode tentar isso também.

simplesmente oculte-o do CSS usando,

 .dataTables_length {
        display: none;
    }

Ambos irão funcionar.

Rupesh Kamble
fonte
2

Apenas escreva :

  $(document).ready( function () {
        $('#example').dataTable( {
          "lengthChange": false
        } );
    } );
Hasan Sheikh
fonte
1

Para ocultar "mostrar entradas", mas ainda ter paginação. Eu usei o código abaixo e funcionou.

"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false
ejay56
fonte
1

Adicione esta opção:

"bInfo": false
cyber8200
fonte
0

Para desativar o rótulo "Mostrar entradas", use "bInfo", por exemplo: "bFilter" é o componente de pesquisa, mas está ativo por padrão.

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

Ative ou desative a exibição de informações da tabela. Isso mostra informações sobre os dados atualmente visíveis na página, incluindo informações sobre dados filtrados, se essa ação estiver sendo executada.

steffanjj
fonte