YUI DataTable - Howto have just one paginator?

Question

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