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

Doc update for paginator

pull/12/head
cagataycivici 2019-05-24 00:30:32 +03:00
parent 7a9c0fafbe
commit 6559b8b426
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/paginator/PaginatorDoc.vue
View File

@ -8,21 +8,31 @@ import Paginator from 'primevue/paginator';
</CodeHighlight> </CodeHighlight>
<h3>Getting Started</h3> <h3>Getting Started</h3>
<p><i>first</i>, <i>rows</i> and <i>totalRecords</i> are the required properties of the Paginator.</p> <p><i>rows</i> and <i>totalRecords</i> are the required properties of the Paginator.</p>
<CodeHighlight> <CodeHighlight>
&lt;Paginator :first.sync="first" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt; &lt;Paginator :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
</CodeHighlight> </CodeHighlight>
<h3>Start Offset</h3> <h3>Start Index</h3>
<p><i>first</i> property defines the index of the first item displayed by the paginator and should be used with the sync operator. <p><i>first</i> property defines the index of the first item displayed by the paginator.</p>
This is useful in cases where the paginator needs to be controlled programmatically such as resetting or navigating to a certain page.</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> <CodeHighlight>
&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt; &lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
</CodeHighlight> </CodeHighlight>
<h3>Rows Per Page</h3> <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>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>
As <i>rows</i> also change when the dropdown changes, use the sync operator for two-way binding.</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> <CodeHighlight>
&lt;Paginator :first.sync="offset" :rows.sync="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt; &lt;Paginator :first.sync="offset" :rows.sync="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
</CodeHighlight> </CodeHighlight>
@ -48,7 +58,7 @@ import Paginator from 'primevue/paginator';
</CodeHighlight> </CodeHighlight>
<h3>Custom Content</h3> <h3>Custom Content</h3>
<p>There are two slots available named "left" and "right" to add custom content to these locations. Both slots get <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. a state object as a slot property to provide the current page, first index and the rows.
</p> </p>
<CodeHighlight> <CodeHighlight>
@ -69,7 +79,7 @@ import Paginator from 'primevue/paginator';
<h3>Page Change Event</h3> <h3>Page Change Event</h3>
<p>Paginator provides only one event called <i>page-change</i> that passes all the information about the change event.</p> <p>Paginator provides only one event called <i>page-change</i> that passes all the information about the change event.</p>
<CodeHighlight> <CodeHighlight>
&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount" @page-change="onPage($event)"&gt;&lt;/Paginator&gt; &lt;Paginator :rows="10" :totalRecords="totalItemsCount" @page-change="onPage($event)"&gt;&lt;/Paginator&gt;
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">