YUI DataTable - Как сделать только один пагинатор?

Question

Я использую таблицу данных YUI в проекте Grails 1.1, используя плагин Grails UI 1.0.2 (YUI - 2.6.1).

По умолчанию DataTable отображает 2 страницы: один над таблицей, а другой под таблицей. Просматривая документацию по API YUI, я мог видеть, что могу передать массив контейнеров YUI в качестве параметра конфигурации, но - как называются эти контейнеры?

Я пытался перебрать HTML-код страницы, используя Firebug. Идентификаторы div, содержащие пагинаторы: yui-dt0-paginator0 (вверху) и yui-dt0-paginator1 (вверху). Если я использую их для настройки контейнеров для навигатора, то навигатор просто не отображается вообще. Вот соответствующий фрагмент страницы GSP, содержащий элемент 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>

Любая помощь?

Спасибо!

Ролло

Answer 1

Хорошо, теперь у меня есть. Размещать его здесь на тот случай, если кто-то столкнется с тем же вопросом.

Итак, вам нужно создать «контейнер» (подойдет 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 будет выравнивать paginator вправо.

Ролло

Answer 2

У меня много десятков таблиц данных YUI, и я не хотел писать селектор для каждого из них, так что вот что я сделал. Создайте div «контейнер» вокруг каждой таблицы данных, затем используйте селектор first-child, чтобы установить видимость скрытого, например:

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

примечание .container_div можно называть как угодно.

Спасибо Ролло и Джаму за вдохновение, это своего рода смесь обеих идей.

Answer 3

С YUI 2.8.0 (а может и с 2.6 тоже) есть более простой способ. Просто добавьте стили:

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

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

Преимущество заключается в том, что нумератор страниц выравнивается по правой границе таблицы. Если вы хотите разместить нумерацию страниц внизу таблицы, просто измените yui-dt0-paginator1 на yui-dt0-paginator0 .