Cómo mostrar todas las filas de forma predeterminada en JQuery DataTable


80

¿Alguien sabe cómo mostrar todas las filas de forma predeterminada en jQuery datatable?

Probé este código, pero solo muestra 10 filas por defecto.

   $("#adminProducts").dataTable({
        "aLengthMenu": [100]
    });

Respuestas:


224

Utilizar:

$('#example').dataTable({
    aLengthMenu: [
        [25, 50, 100, 200, -1],
        [25, 50, 100, 200, "All"]
    ],
    iDisplayLength: -1
});

O si usa 1.10+

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

16
O "paging": falsesi usa DataTables 1.10 nueva API .
Ronan Jouchet

O <table data-display-length='-1'>si desea utilizar las opciones DOM (DataTables 1.10+, consulte datatables.net/manual/data/orthogonal-data#HTML-5 ).
Jeromy French

2
La esencia de esta respuesta muy correcta es iDisplayLength: -1
Joe Johnston

16

La opción que debe utilizar es iDisplayLength:

$('#adminProducts').dataTable({
  'iDisplayLength': 100
});

4
$('#table').DataTable({
   "lengthMenu": [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ]
});

3

Esta funciona para mí:

    $(document).ready(function() {
    $('#example').DataTable( {
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
      } );
    } );

1

Si está usando DataTables 1.10+, puede usar el atributo data- * en su <table>etiqueta data-page-length="-1"

Esto supone que tiene "-1" definido en la configuración predeterminada de su tabla de datos, como a continuación

$.extend(true, $.fn.dataTable.defaults, { 
    lengthMenu: [[10, 25, 50, 250, -1], [10, 25, 50, 250, "All"]]
});

Su javascript se vuelve simple $("table").DataTables();y puede personalizar la visualización para cada tabla dentro del HTML; ES DECIR. si tiene una segunda tabla más pequeña en la misma página que debería estar limitada a 10 filas,<table data-page-length="10">


1
perfecto mondo! La mejor respuesta dada el secnario donde se realiza una inicialización global de DataTables ()
Vishnoo Rath

0

use 'fnDrawCallback'

  $('#dataTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "fnInitComplete": function(){
            $('.display_results').show();
        },
        "fnDrawCallback": function() {
            $('.def').click(function(){
                var msg = $(this).next().text();
                $('.messages').messageBox()//Custom Dialog
            });
        }
})

0

Aquí está el javascript funcional completo para su archivo .html

<!--- javascript -->
<script type="text/javascript">
  $(document).ready(function(){
    $('#sortable').dataTable({
        'iDisplayLength': 100
    })})
</script>

0

tienes que descargar bootstrap-table.min.js y hacerle alguna modificación ..

  • Si descarga bootstrap-table.min.js, simplemente ábralo e intente encontrar "pageList: [10", hágalo como "pageList: [10,15,20,25,50,100," All "]" make asegúrese de que "Todo" escrito así.

  • El tamaño de página predeterminado también se puede cambiar desde la misma línea "pageSize: 10", puede cambiarlo como pageSize: "All".

  • También se pueden modificar otras opciones.

  • No olvide incluirlo o vincularlo a un nuevo lugar después de completar su modificación.

Espero que sea lo suficientemente claro y fácil de hacer.


Intenté todas las respuestas anteriores y no funcionó. Simplemente siga las instrucciones anteriores.
Hamood K Alazri
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.