2
我想將paragator的東西帶到數據表外。現在在primefaces中，paginator附帶了數據表。我想把它帶到外面。我該如何實現這個目標？我的預期成果是，如何使用datatable之外的primefaces paginator？
示例代碼：
<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>
請包括由PrimeFaces呈現的相關HTML。該HTML可以通過使用CSS進行樣式化。這可能會把paginator放在「外面」。 –
@JasperdeVries我已經添加了示例代碼，我如何使用css更改分頁位置？ –
您已添加XHTML標記。請用呈現的HTML替換它。在大多數瀏覽器中，可以通過按F12並檢查DOM來找到它。 –