如何在数据表之外使用primefaces paginator？

时间：2016-08-29 10:22:26

标签： css primefaces

我想把分页器的东西带到数据表之外。现在在primefaces中，paginator附加了数据表。我想把它带到外面。我怎么能做到这一点？我的预期输出是，

enter image description here

示例代码：

<div class="ui-datatable ui-widget" id="j_idt88:j_idt89">
<div aria-label="Pagination" role="navigation"
    class="ui-paginator ui-paginator-top ui-widget-header ui-corner-top"
    id="j_idt88:j_idt89_paginator_top">
    <span class="ui-paginator-current">(1 of 5)</span><a
        aria-label="First Page"
        class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled"
        href="#"><span class="ui-icon ui-icon-seek-first">p</span></a><a
        aria-label="Previous Page"
        class="ui-paginator-prev ui-state-default ui-corner-all ui-state-disabled"
        href="#"><span class="ui-icon ui-icon-seek-prev">p</span></a><span
        class="ui-paginator-pages"><a href="#" tabindex="0"
        class="ui-paginator-page ui-state-default ui-state-active ui-corner-all"
        aria-label="Page 1">1</a><a href="#" tabindex="0"
        class="ui-paginator-page ui-state-default ui-corner-all"
        aria-label="Page 2">2</a><a href="#" tabindex="0"
        class="ui-paginator-page ui-state-default ui-corner-all"
        aria-label="Page 3">3</a><a href="#" tabindex="0"
        class="ui-paginator-page ui-state-default ui-corner-all"
        aria-label="Page 4">4</a><a href="#" tabindex="0"
        class="ui-paginator-page ui-state-default ui-corner-all"
        aria-label="Page 5">5</a></span><a tabindex="0" aria-label="Next Page"
        class="ui-paginator-next ui-state-default ui-corner-all" href="#"><span
        class="ui-icon ui-icon-seek-next">p</span></a><a tabindex="0"
        aria-label="Last Page"
        class="ui-paginator-last ui-state-default ui-corner-all" href="#"><span
        class="ui-icon ui-icon-seek-end">p</span></a><label
        class="ui-paginator-rpp-label ui-helper-hidden"
        for="j_idt88:j_idt89:j_id2" id="j_idt88:j_idt89_rppLabel">Rows
        Per Page</label><select autocomplete="off" value="10"
        class="ui-paginator-rpp-options ui-widget ui-state-default ui-corner-left"
        aria-labelledby="j_idt88:j_idt89_rppLabel"
        name="j_idt88:j_idt89_rppDD" id="j_idt88:j_idt89:j_id2"><option
            value="5">5</option>
        <option selected="selected" value="10">10</option>
        <option value="15">15</option></select>
</div>
<div class="ui-datatable-tablewrapper">
    <table role="grid">
        <thead id="j_idt88:j_idt89_head">
            <tr role="row">
                <th aria-label="Id" role="columnheader" class="ui-state-default"
                    id="j_idt88:j_idt89:j_idt90"><span class="ui-column-title">Id</span></th>
                <th aria-label="Year" role="columnheader" class="ui-state-default"
                    id="j_idt88:j_idt89:j_idt92"><span class="ui-column-title">Year</span></th>
                <th aria-label="Brand" role="columnheader" class="ui-state-default"
                    id="j_idt88:j_idt89:j_idt94"><span class="ui-column-title">Brand</span></th>
                <th aria-label="Color" role="columnheader" class="ui-state-default"
                    id="j_idt88:j_idt89:j_idt96"><span class="ui-column-title">Color</span></th>
            </tr>
        </thead>
        <tbody class="ui-datatable-data ui-widget-content"
            id="j_idt88:j_idt89_data">
            <tr role="row" class="ui-widget-content ui-datatable-even"
                data-ri="0">
                <td role="gridcell">66b09576</td>
                <td role="gridcell">1993</td>
                <td role="gridcell">Audi</td>
                <td role="gridcell">Orange</td>
            </tr>
            <tr role="row" class="ui-widget-content ui-datatable-odd"
                data-ri="1">
                <td role="gridcell">1615e972</td>
                <td role="gridcell">1984</td>
                <td role="gridcell">Fiat</td>
                <td role="gridcell">Maroon</td>
            </tr>
            <tr role="row" class="ui-widget-content ui-datatable-even"
                data-ri="2">
                <td role="gridcell">3720b3ba</td>
                <td role="gridcell">1962</td>
                <td role="gridcell">Mercedes</td>
                <td role="gridcell">Blue</td>
            </tr>
            <tr role="row" class="ui-widget-content ui-datatable-odd"
                data-ri="3">
                <td role="gridcell">e5fd6516</td>
                <td role="gridcell">1996</td>
                <td role="gridcell">Fiat</td>
                <td role="gridcell">Blue</td>
            </tr>
            <tr role="row" class="ui-widget-content ui-datatable-even"
                data-ri="4">
                <td role="gridcell">e84468bb</td>
                <td role="gridcell">2000</td>
                <td role="gridcell">Jaguar</td>
                <td role="gridcell">Black</td>
            </tr>
            <tr role="row" class="ui-widget-content ui-datatable-odd"
                data-ri="5">
                <td role="gridcell">4020f7ff</td>
                <td role="gridcell">1983</td>
                <td role="gridcell">Volkswagen</td>
                <td role="gridcell">Maroon</td>
            </tr>
            <tr role="row" class="ui-widget-content ui-datatable-even"
                data-ri="6">
                <td role="gridcell">7d66cace</td>
                <td role="gridcell">1998</td>
                <td role="gridcell">Ford</td>
                <td role="gridcell">Blue</td>
            </tr>
            <tr role="row" class="ui-widget-content ui-datatable-odd"
                data-ri="7">
                <td role="gridcell">a065fd99</td>
                <td role="gridcell">1980</td>
                <td role="gridcell">Volvo</td>
                <td role="gridcell">White</td>
            </tr>
            <tr role="row" class="ui-widget-content ui-datatable-even"
                data-ri="8">
                <td role="gridcell">3e690015</td>
                <td role="gridcell">1973</td>
                <td role="gridcell">Mercedes</td>
                <td role="gridcell">Red</td>
            </tr>
            <tr role="row" class="ui-widget-content ui-datatable-odd"
                data-ri="9">
                <td role="gridcell">81fe065f</td>
                <td role="gridcell">1982</td>
                <td role="gridcell">Volvo</td>
                <td role="gridcell">Silver</td>
            </tr>
        </tbody>
    </table>
</div>
<div aria-label="Pagination" role="navigation"
    class="ui-paginator ui-paginator-bottom ui-widget-header ui-corner-bottom"
    id="j_idt88:j_idt89_paginator_bottom">
    <span class="ui-paginator-current">(1 of 5)</span><a
        aria-label="First Page"
        class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled"
        href="#"><span class="ui-icon ui-icon-seek-first">p</span></a><a
        aria-label="Previous Page"
        class="ui-paginator-prev ui-state-default ui-corner-all ui-state-disabled"
        href="#"><span class="ui-icon ui-icon-seek-prev">p</span></a><span
        class="ui-paginator-pages"><a href="#" tabindex="0"
        class="ui-paginator-page ui-state-default ui-state-active ui-corner-all"
        aria-label="Page 1">1</a><a href="#" tabindex="0"
        class="ui-paginator-page ui-state-default ui-corner-all"
        aria-label="Page 2">2</a><a href="#" tabindex="0"
        class="ui-paginator-page ui-state-default ui-corner-all"
        aria-label="Page 3">3</a><a href="#" tabindex="0"
        class="ui-paginator-page ui-state-default ui-corner-all"
        aria-label="Page 4">4</a><a href="#" tabindex="0"
        class="ui-paginator-page ui-state-default ui-corner-all"
        aria-label="Page 5">5</a></span><a tabindex="0" aria-label="Next Page"
        class="ui-paginator-next ui-state-default ui-corner-all" href="#"><span
        class="ui-icon ui-icon-seek-next">p</span></a><a tabindex="0"
        aria-label="Last Page"
        class="ui-paginator-last ui-state-default ui-corner-all" href="#"><span
        class="ui-icon ui-icon-seek-end">p</span></a><label
        class="ui-paginator-rpp-label ui-helper-hidden"
        for="j_idt88:j_idt89:j_id3" id="j_idt88:j_idt89_rppLabel">Rows
        Per Page</label><select autocomplete="off" value="10"
        class="ui-paginator-rpp-options ui-widget ui-state-default ui-corner-left"
        aria-labelledby="j_idt88:j_idt89_rppLabel"
        name="j_idt88:j_idt89_rppDD" id="j_idt88:j_idt89:j_id3"><option
            value="5">5</option>
        <option selected="selected" value="10">10</option>
        <option value="15">15</option></select>
</div>

1 个答案:

答案 0 :(得分：0)

PrimeNg paginator不仅用于数据表，还可用于任何数据。

This manual完美地描述了分页符的使用。

简短 - <p-paginator></p-paginator>标记描述分页。

相关问题
最新问题