2
paginatorのものをdatatableの外に持っていきたいです。今やプライムフェイスでは、ページネーターはデータテーブルに添付されます。私はそれを外に持っていきたい。どのように私はこれを達成することができますか？私の予想出力は、datatableの外でprimefaces paginatorを使用するには？
あるサンプルコード：DataTableのではないだけに使用
<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を使ってスタイル付けすることができます。これは、ページャーを「外側に」置くかもしれません。 –
@JasperdeVriesサンプルコードを追加しました.cssを使用してページング位置を変更するにはどうすればよいですか？ –
XHTMLマークアップを追加しました。レンダリングされたHTMLに置き換えてください。ほとんどのブラウザーでは、F12を押してDOMを調べることで見つけられます。 –