DataTable: Ocultar el menú desplegable Mostrar entradas pero mantener el cuadro de búsqueda

129

¿Es posible ocultar el menú desplegable Mostrar entradas pero mantener el cuadro de búsqueda en DataTable? Quiero mostrar siempre 10 filas con paginación en la parte inferior junto con el cuadro de búsqueda, pero no quiero mostrar el menú desplegable Mostrar entradas.

datatable dt

— FaisalKhan
fuente

288

Puede encontrar más información directamente en este enlace: 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 ayude !

EDITAR: Si eres vago, "bLengthChange": falso, es el que necesitas cambiar :)

— PERPO
fuente

56

Si usa Datatable> 1.1.0, entonces la lengthChangeopción es lo que necesita de la siguiente manera:

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

— Jimmy Obonyo Abor
fuente

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
fuente

19

Esta es la respuesta clave a esta publicación "bLengthChange": false,que ocultará el menú desplegable de entradas

9

Para DataTables <= 1.9, la respuesta de @perpo

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

funciona bien, pero para 1.10+ intente esto:

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

donde hemos omitido lel "control de entrada que cambia la longitud"

1.9 documentos

1.10 documentos

— Michal Frystacky
fuente

esto es mejor porque elimina el elemento de retención div del elemento. con el elemento bLenghChange se ha ido pero hay espacios en blanco. Gracias !

— Hamid Salari

9

Lo resuelvo así. Use bootstrap 4

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

cdn js:

cdn css:

— sombras3002
fuente

1

Esto funciona para las tablas de datos en 2018, ninguna de las otras lo hizo.

— Dammeul

8

sDom: "Tfrtip" o mediante una devolución de llamada:

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

— cnizzardini
fuente

3

Para deshabilitar la etiqueta "Mostrar entradas", agregue el código dom: 'Bfrtip' o puede agregar "bInfo": falso

$('#example').DataTable({
    dom: 'Bfrtip'
})

— chitranjan srivastva
fuente

2

Puedes probar esto también.

simplemente escóndelo de CSS usando,

 .dataTables_length {
        display: none;
    }

Ambos funcionarán.

— Rupesh Kamble
fuente

2

Solo escribe :

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

— Hasan Sheikh
fuente

1

Para ocultar "mostrar entradas" pero aún tener paginación. Usé el código a continuación y funcionó.

"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false

— ejay56
fuente

1

Agrega esta opción:

"bInfo": false

— cyber8200
fuente

0

Para deshabilitar la etiqueta "Mostrar entradas", use "bInfo", por ejemplo: "bFilter" es el componente de búsqueda, pero está activo de forma predeterminada.

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

Activa o desactiva la visualización de información de la tabla. Esto muestra información sobre los datos que están visibles actualmente en la página, incluida información sobre los datos filtrados si se está realizando esa acción.

— steffanjj
fuente