YUI DataTable - Comment avoir un seul paginateur?

Question

J'utilise le YUI DataTable dans un projet Grails 1.1 en utilisant le plugin Grails UI 1.0.2 (YUI étant 2.6.1).

Par défaut, le DataTable affiche 2 paginateurs: un au-dessus et un autre au-dessous du tableau. En regardant la documentation de l'API YUI, j'ai pu voir que je pouvais passer un tableau de conteneurs YUI en tant que paramètre de configuration mais - quels sont les noms de ces conteneurs?

J'ai essayé de lire au format HTML de la page en utilisant Firebug. Les ID des divs contenant les paginateurs sont: yui-dt0-paginator0 (ci-dessus) et yui-dt0-paginator1 (ci-dessous). Si je les utilise pour configurer les conteneurs pour le navigateur, le navigateur ne s'affiche tout simplement pas. Voici l'extrait pertinent de la page GSP contenant l'élément Datatable.

<div class="body"> 
     <h1>This is the List of Control Accounts</h1> 
     <g:if test="${flash.message}"> 
     <div class="message">${flash.message}</div> 
     </g:if> 
     <div class="yui-skin-sam"> 
      <gui:dataTable 
      controller="controlAccount" action="enhancedListDataTableJSON" 
      columnDefs="[ 
       [key:'id', label:'ID'], 
       [key:'col1', label:'Col 1', sortable: true, resizeable: true], 
       [key:'col2', label:'Col 2', sortable: true, resizeable: true] 
       ]" 
      sortedBy="col1" 
      rowsPerPage="20" 
      paginatorConfig="[ 
      template:'{PreviousPageLink} {PageLinks} {NextPageLink} {CurrentPageReport}', 
      pageReportTemplate:'{totalRecords} total accounts', 
      alwaysVisible:true, 
      containers:'yui-dt0-paginator1' 
      ]" 
      rowExpansion="true" 
      /> 
     </div> 
    </div> 

Une aide?

Merci!

Rollo

Answer 1

Ok, je l'ai maintenant. L'afficher ici au cas où quelqu'un se heurterait à la même question.

Donc, ce que vous avez à faire est de créer un conteneur (un DIV fera l'affaire) quel que soit l'ID, et de le référencer dans l'élément de configuration des conteneurs. Exemple:

<div class="body"> 
    <h1>This is the List of Control Accounts</h1> 
    <g:if test="${flash.message}"> 
    <div class="message">${flash.message}</div> 
    </g:if> 
      <div class="yui-skin-sam"> 
        <gui:dataTable 
        controller="controlAccount" action="enhancedListDataTableJSON" 
        columnDefs="[ 
          [key:'id', label:'ID'], 
          [key:'col1', label:'Col 1', sortable: true, resizeable: true], 
          [key:'col2', label:'Col 2', sortable: true, resizeable: true] 
          ]" 
        sortedBy="col1" 
        rowsPerPage="20" 
        paginatorConfig="[ 
        template:'{PreviousPageLink} {PageLinks} {NextPageLink} {CurrentPageReport}', 
        pageReportTemplate:'{totalRecords} total accounts', 
        alwaysVisible:true, 
        containers:'dt-paginator' 
        ]" 
        rowExpansion="true" 
        /> 
      </div> 
      <div id="dt-paginator" class="yui-skin-sam yui-pg-container" style="text-align: right;"> 
</div> 

Vous devez juste vous assurer que la classe associée à la div est yui-pg-container. En bonus, le style de cette div alignera le paginateur vers la droite.

Rollo

Answer 2

Avec YUI 2.8.0 (et peut-être avec 2,6 également) il existe un moyen plus facile. Il suffit d'ajouter les styles:

.yui-skin-sam .yui-dt-paginator { 
    text-align:right; 
} 

#yui-dt0-paginator1 { 
    display:none; 
} 

Ceci a l'avantage que le paginateur est aligné sur la bordure droite de la table. Si vous voulez avoir la pagination au bas de la table, changez simplement yui-dt0-paginator1 en yui-dt0-paginator0.

Answer 3

J'ai beaucoup de dizaines de données YUI et je ne voulais pas avoir à écrire un sélecteur pour chacune d'elles, voici ce que j'ai fait. Créer un « conteneur » autour de chaque div datatable puis utilisez le sélecteur premier enfant à définir la visibilité hidden comme ceci:

.container_div .yui-dt-paginator:first-child { 
    visibility:hidden; 
} 

Note .container_div peut être appelé tout ce que vous aimez. Merci à Rollo et jm pour l'inspiration, c'est un mélange des deux idées.