grails - YUI DataTable-如何只有一个分页器？

Question

我正在使用Grails UI插件1.0.2(YUI为2.6.1)的Grails 1.1项目中使用YUI DataTable。

默认情况下，DataTable显示2个分页器:一个在表上方，另一个在表下方。查看YUI API文档，可以看到可以将一组YUI容器作为配置参数传递，但是-这些容器的名称是什么？

我尝试使用Firebug查找网页的HTML。包含分页符的div的ID为:yui-dt0-paginator0(上方)和yui-dt0-paginator1(下方)。如果我使用它们来配置导航器的容器，那么导航器根本不会显示。这是包含Datatable元素的GSP页面的相关摘录。

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

有什么帮助吗？

谢谢!

罗洛

Answer 1

好的，我现在有。如果有人碰到相同的问题，请在此处发布。

因此，您要做的就是通过任何id创建一个“容器”(DIV会做)，并将其引用到容器配置项中。例:

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

您只需要确保与div关联的类是yui-pg-container。
另外，该div上的样式会将分页器向右对齐。

罗洛