vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity
primevue-mirror/src/views/paginator/PaginatorDoc.vue

302 lines
12 KiB
Vue
Executable File
Raw Blame History

<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<CodeHighlight lang="javascript">
import Paginator from 'primevue/paginator';
</CodeHighlight>
<h3>Getting Started</h3>
<p><i>rows</i> and <i>totalRecords</i> are the required properties of the Paginator.</p>
<CodeHighlight>
&lt;Paginator :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
</CodeHighlight>
<h3>Start Index</h3>
<p><i>first</i> property defines the index of the first item displayed by the paginator.</p>
<CodeHighlight>
&lt;Paginator :first="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
</CodeHighlight>
<p>Use the sync operator to enable two-way binding, this is useful in cases where you need to programmatically control the paginator.</p>
<CodeHighlight>
&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
</CodeHighlight>
<h3>Rows Per Page</h3>
<p>Number of items per page can be changed by the user using a dropdown with the <i>rowsPerPageOptions</i> property which accepts an array of possible values.</p>
<CodeHighlight>
&lt;Paginator :first.sync="offset" :rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
</CodeHighlight>
<p>As <i>rows</i> also change when the dropdown changes, use the optional sync operator if you need two-way binding.</p>
<CodeHighlight>
&lt;Paginator :first.sync="offset" :rows.sync="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
</CodeHighlight>
<h3>Template</h3>
<p>Paginator elements can be customized using the template property using the predefined keys, default value is
"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
can be placed inside a paginator in any order.</p>
<ul>
<li>FirstPageLink</li>
<li>PrevPageLink</li>
<li>PageLinks</li>
<li>NextPageLink</li>
<li>LastPageLink</li>
<li>RowsPerPageDropdown</li>
<li>CurrentPageReport</li>
</ul>
<h3>CurrentPageReport</h3>
<p>Current page report item in the template displays information about the pagination state. Default value is (&#123;currentPage&#125; of &#123;totalPages&#125;)
whereas available placeholders are the following;
</p>
<ul>
<li>&#123;currentPage&#125;</li>
<li>&#123;totalPages&#125;</li>
<li>&#123;rows&#125;</li>
<li>&#123;first&#125;</li>
<li>&#123;last&#125;</li>
<li>&#123;totalRecords&#125;</li>
</ul>
<h3>Custom Content</h3>
<p>There are two templates available named "left" and "right" to add custom content to these locations. Both templates get
a state object as a slot property to provide the current page, first index and the rows.
</p>
<CodeHighlight>
<template v-pre>
&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;
&lt;template #left="slotProps"&gt;
Page: &#123;&#123;slotProps.state.page&#125;&#125;
First: &#123;&#123;slotProps.state.first&#125;&#125;
Rows: &#123;&#123;slotProps.state.rows&#125;&#125;
&lt;/template&gt;
&lt;template #right&gt;
&lt;Button type="button" icon="pi pi-search" /&gt;
&lt;/template&gt;
&lt;/Paginator&gt;
</template>
</CodeHighlight>
<h3>Page Change Event</h3>
<p>Paginator provides only one event called <i>page</i> that passes all the information about the change event.</p>
<CodeHighlight>
&lt;Paginator :rows="10" :totalRecords="totalItemsCount" @page="onPage($event)"&gt;&lt;/Paginator&gt;
</CodeHighlight>
<CodeHighlight lang="javascript">
onPage(event) {
//event.page: New page number
//event.first: Index of first record
//event.rows: Number of rows to display in new page
//event.pageCount: Total number of pages
}
</CodeHighlight>
<h3>Properties</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>totalRecords</td>
<td>number</td>
<td>0</td>
<td>Number of total records.</td>
</tr>
<tr>
<td>rows</td>
<td>number</td>
<td>0</td>
<td>Data count to display per page.</td>
</tr>
<tr>
<td>first</td>
<td>number</td>
<td>0</td>
<td>Zero-relative number of the first row to be displayed.</td>
</tr>
<tr>
<td>pageLinkSize</td>
<td>number</td>
<td>5</td>
<td>Number of page links to display.</td>
</tr>
<tr>
<td>rowsPerPageOptions</td>
<td>array</td>
<td>null</td>
<td>Array of integer values to display inside rows per page dropdown.</td>
</tr>
<tr>
<td>template</td>
<td>string</td>
<td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
<td>Template of the paginator.</td>
</tr>
<tr>
<td>currentPageReportTemplate</td>
<td>string</td>
<td>(&#123;currentPage&#125; of &#123;totalPages&#125;)</td>
<td>Template of the current page report element. Available placeholders are
&#123;currentPage&#125;,&#123;totalPages&#125;,&#123;rows&#125;,&#123;first&#125;,&#123;last&#125; and &#123;totalRecords&#125;
</td>
</tr>
<tr>
<td>alwaysShow</td>
<td>boolean</td>
<td>true</td>
<td>Whether to show the paginator even there is only one page.</td>
</tr>
</tbody>
</table>
</div>
<h3>Events</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>page</td>
<td>event.page: New page number <br/>
event.first: Index of first record <br/>
event.rows: Number of rows to display in new page <br/>
event.pageCount: Total number of pages
</td>
<td>Callback to invoke when page changes, the event object contains information about the new state.</td>
</tr>
</tbody>
</table>
</div>
<h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-paginator</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-paginator-first</td>
<td>First page element.</td>
</tr>
<tr>
<td>p-paginator-prev</td>
<td>Previous page element.</td>
</tr>
<tr>
<td>p-paginator-pages</td>
<td>Container of page links.</td>
</tr>
<tr>
<td>p-paginator-page</td>
<td>A page link.</td>
</tr>
<tr>
<td>p-paginator-next</td>
<td>Next pge element.</td>
</tr>
<tr>
<td>p-paginator-last</td>
<td>Last page element.</td>
</tr>
<tr>
<td>p-paginator-rpp-options</td>
<td>Rows per page dropdown.</td>
</tr>
</tbody>
</table>
<h3>Dependencies</h3>
<p>None.</p>
</div>
</TabPanel>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primereact/tree/master/src/showcase/paginator" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<CodeHighlight>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
&lt;h3&gt;Custom&lt;/h3&gt;
&lt;Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"&gt;
&lt;template #left&gt;
&lt;Button type="button" icon="pi pi-refresh" @click="reset()"/&gt;
&lt;/template&gt;
&lt;template #right&gt;
&lt;Button type="button" icon="pi pi-search" /&gt;
&lt;/template&gt;
&lt;/Paginator&gt;
&lt;div class="image-gallery"&gt;
&lt;img :src="'demo/images/nature/' + image + '.jpg'" /&gt;
&lt;/div&gt;
</CodeHighlight>
<CodeHighlight lang="javascript">
export default {
data() {
return {
first: 0,
totalRecords: 120,
totalRecords2: 12
}
},
methods: {
reset() {
this.first = 0;
}
},
computed: {
image() {
return 'nature' + (this.first + 1);
}
}
}
</CodeHighlight>
<CodeHighlight lang="css">
.p-button.p-button-icon-only {
border-radius: 0;
}
.image-gallery {
text-align: center;
padding: 1rem;
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>
View Git Blame Copy Permalink