javascript - example - paginacion datatable jquery

DataTable: ¿Cómo ocultar la paginación y solo mostrarla como necesidad?

Question

Tengo 2 tablas que usan el plugin jQuery de DataTable. Me pregunto si hay una manera de ocultar mi paginación en la parte inferior derecha de mi mesa.

Nota:

• Solo muestre la paginación cuando la necesite.
• Oculta la paginación cuando los resultados de la consulta son menores a 10.

Answer 1

Puede dar opciones cuando crea sus datables en Javascript

$(''.examples'').DataTable({ "paging": false });

Todas las opciones se enumeran aquí: http://www.datatables.net/reference/option/

Answer 2

  $(''#dataTable_ListeUser'').DataTable( {

        //usual pager parameters//

        "drawCallback": function ( settings ) {

        /*show pager if only necessary
        console.log(this.fnSettings());*/
        if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
            $(''#dataTable_ListeUser_paginate'').css("display", "block");     
        } else {                
            $(''#dataTable_ListeUser_paginate'').css("display", "none");
        }

        }
       });

Answer 3

Utilice la opción drawCallback para manejar el evento de extracción DT y mostrar / ocultar el control de paginación en función de las páginas disponibles:

$(''#table_id'').dataTable({
  drawCallback: function(settings) {
    var pagination = $(this).closest(''.dataTables_wrapper'').find(''.dataTables_paginate'');
    pagination.toggle(this.api().page.info().pages > 1);
  }
})

Answer 4

$(this) no funcionó para mí, probablemente porque estoy usando TypeScript. Así que utilicé un enfoque diferente para obtener el elemento JQuery para el contenedor de tablas y la API de DataTables. Esto se inspiró en la respuesta de BitOfUniverse y se probó con DataTables 1.10.

Mecanografiado:

''drawCallback'': (settings: any) => {
      // hide pager and info if the table has NO results
      const api = new $.fn.dataTable.Api(settings);
      const pageCount = api.page.info().pages;

      const wrapper = $(''#'' + settings.sTableId).closest(''.dataTables_wrapper'');
      const pagination = wrapper.find(''.dataTables_paginate'');
      const info = wrapper.find(''.dataTables_info'');

      pagination.toggle(pageCount > 0);
      info.toggle(pageCount > 0);
 }

Answer 5

Use ''drawCallback'' para resolver este problema.

1.En la página web, use la herramienta de desarrollador para inspeccionar el botón "anterior", luego encontrará un elemento div que envuelve los botones "anterior" y "siguiente". DataTables asignó automáticamente un id a este div en función de la id de su elemento de tabla html.

Por ejemplo, tengo una tabla con id ''Atable''. En esta tabla, DataTables creó automáticamente un elemento div con id llamado ''Atable_paginate'' para ajustar los botones anterior y siguiente.

2. Para drawCallback, escribimos una función que verifica si hay menos de 1 página, si es así, ocultamos el elemento utilizando id.

Por ejemplo, ha establecido que hay 20 registros en una página por

pageLength: 20,

lo que significa que si hay menos de 20 registros, no es necesario que muestre los botones "anterior" y "siguiente". Entonces escribimos como a continuación,

drawCallback: function(settings){
    if($(this).find(''tbody tr'').length <= 20){
        $(''#Atable_paginate'').hide();
    }
}

3. La inicialización de Atable debería ser como a continuación

var table = $(''#Atable'').DataTable({
    pageLength: 20,
    lengthChange: false,
    drawCallback: function(settings){   
        if($(this).find(''tbody tr'').length <= 20){
            $(''#Atable_paginate'').hide();
        }
    }
});

4. Si hay más de una tabla en la página web, aplique este método en cada tabla.