DataTable: comment cacher la pagination et ne la montrer qu'en cas de besoin?

Utiliser drawCallback option pour la gestion des DT draw événement et afficher/masquer la pagination de contrôle fondés sur des pages:

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

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

        }
       });

utilisez 'drawCallback' pour résoudre ce problème.

1.Sur la page Web, utilisez l'outil de développement pour inspecter le bouton "Précédent", puis vous trouverez un élément div qui enveloppe à la fois les boutons "Précédent" et "suivant". DataTables a automatiquement assigné un id à ce div basé sur l'id de votre élément de table html.

par exemple, j'ai une table avec id 'Atable'. Dans cette table, DataTables a créé automatiquement un élément div avec l'id appelé "Atabl_paginate" pour envelopper le précédent et le précédent. à côté des boutons.

2.Pour drawCallback, nous écrivons une fonction qui vérifie s'il y a moins d'une page, si c'est le cas, nous masquons l'élément en utilisant id.

par exemple, vous avez défini qu'il y a 20 enregistrements sur une page par

pageLength: 20,

ce qui signifie que s'il y a moins de 20 enregistrements, nous n'avons pas besoin d'afficher les boutons 'Précédent' et 'suivant'. Donc nous écrivons comme ci-dessous,

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

3.L'initialisation d'Atable devrait être comme ci-dessous

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

4.Si il y a plus d'un tableau sur la page Web, appliquez cette méthode sur chaque tableau.

Vous pouvez utiliser fnDrawCallback () méthode pour cacher le la pagination dataTable.

var oTable = $('#datatable_sample').dataTable({
    "iDisplayLength": 10,    
    "fnDrawCallback": function(oSettings) {
        if ($('#datatable_sample tr').length < 10) {
            $('.dataTables_paginate').hide();
        }
    }
});​

longueur laquelle vous pouvez définir que par la ligne que vous souhaitez afficher dans la liste.

$(this) n'a pas fonctionné pour moi, probablement parce que j'utilise le Typographie. J'ai donc utilisé une approche différente pour obtenir L'élément JQuery pour l'enveloppe de la table et L'API DataTables. Cela a été inspiré par la réponse de Bitofuniversse et testé avec des données 1.10.

dactylographié:

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

Vous pouvez donner des options lorsque vous créez vos données sur Javascript

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

Toutes les options sont listées ici: http://www.datatables.net/reference/option/