YUI DataTable - Howto have just one paginator?

Question

Hello,

I'm using the YUI DataTable in a Grails 1.1 project using the Grails UI plugin 1.0.2 (YUI being 2.6.1).

By default, the DataTable displays 2 paginators: one above and another one below the table. Looking up the YUI API documentation, I could see that I can pass an array of YUI containers as a config parameter but - what are the names of these containers?

I've tried loooking at the HTML of the page using Firebug. The ID of the divs containing the paginators are: yui-dt0-paginator0 (above) and yui-dt0-paginator1 (below). If I use them to configure the containers for the navigator, then the navigator is just not displayed at all. Here's the relevant extract of the GSP page containing the Datatable element.

    <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>

Any help?

Thanks!

Rollo

Answer 1

Ok, I have it now. Posting it here in case someone bumps into the same question.

So what you have to do is create a 'container' (a DIV will do) by whatever id, and reference it into the containers configuration item. Example:

<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>

You just have to make sure that the class associated to the div is yui-pg-container. As an added bonus, the style on that div will align the paginator to the right.

Rollo

Answer 2

With YUI 2.8.0 (and maybe with 2.6 as well) there is an easier way. Just add the styles:

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

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

This has the advantage that the paginator is aligned to the tables right border. If you want to have the pagination at the bottom of the table, just change yui-dt0-paginator1 to yui-dt0-paginator0.

Answer 3

I have many tens of YUI datatables and didn't want to have to write a selector for each one so here is what I did. Create a 'container' div around each datatable then use the first-child selector to set the visibility to hidden like so:

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

note .container_div can be called what ever you like.

Thanks to both Rollo and jm for the inspiration, it's kind of a mashup of both ideas.