web-dev-qa-db-fra.com

DataTable: Comment cacher la pagination et ne la montrer que comme un besoin?

J'ai deux tables qui utilisent DataTable jQuery Plug-in . Je me demande s’il est possible de cacher ma pagination en bas à droite de ma table 

enter image description here

Remarque:

  • Afficher uniquement la pagination lorsque j'en ai besoin.
  • Masquer la pagination lorsque le résultat de la requête est inférieur à 10.
javascriptjquerydatatablesjquery-datatables
13
user4287698

Utilisez drawCallback option pour gérer DT draw event et afficher/masquer le contrôle de la pagination en fonction des pages disponibles:

$('#table_id').dataTable({
  drawCallback: function(settings) {
    var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
    pagination.toggle(this.api().page.info().pages > 1);
  }
})
46
BitOfUniverse
  $('#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");
        }

        }
       });
3
Matoeil

Vous pouvez utiliser fnDrawCallback () method pour masquer la pagination in dataTable .

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

Le longueur que vous pouvez définir en fonction de la ligne que vous souhaitez afficher dans la liste.

2
Sreejith Gopinath

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

1. Sur la page Web, utilisez l'outil de développement pour examiner le bouton "Précédent". Vous trouverez ensuite un élément div qui englobe les boutons "Précédent" et "Suivant". DataTables a automatiquement attribué un identifiant à cette div en fonction de l'identifiant de votre élément de table html. 

Par exemple, j'ai une table avec l'id 'Atable'. Dans cette table, DataTables a automatiquement créé un élément div avec l'id appelé 'Atable_paginate' pour envelopper les boutons précédent et suivant.

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

Par exemple, vous avez défini 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. S'il existe plusieurs tableaux sur la page Web, appliquez cette méthode à chaque tableau.

1
Xie Jun

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

Manuscrit:

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