From b7f9f056496f134c03a6ed17f5f42137797dc464 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Thu, 21 Mar 2019 10:47:22 +0300 Subject: [PATCH] Finished paginator docs --- src/views/paginator/PaginatorDoc.vue | 88 +++++++++++++++++++++++++--- 1 file changed, 79 insertions(+), 9 deletions(-) diff --git a/src/views/paginator/PaginatorDoc.vue b/src/views/paginator/PaginatorDoc.vue index edb6e14bb..82ee81612 100644 --- a/src/views/paginator/PaginatorDoc.vue +++ b/src/views/paginator/PaginatorDoc.vue @@ -8,21 +8,23 @@ import Paginator from 'primevue/paginator';

Getting Started

-

rows and totalRecords define how many pages the paginator should display. Paginator below has 10 pages.

+

first, rows and totalRecords are the required properties of the Paginator.

-<Paginator :rows="10" :totalRecords="totalItems"></Paginator> +<Paginator :first.sync="first" :rows="10" :totalRecords="totalItemsCount"></Paginator>

Start Offset

-

first property defines the index of the first item displayed by the paginator. This is useful in cases where the paginator needs to be controlled programmatically such as resetting or navigating to a certain page.

+

first property defines the index of the first item displayed by the paginator and should be used with the sync operator. + This is useful in cases where the paginator needs to be controlled programmatically such as resetting or navigating to a certain page.

-<Paginator :first="offset" :rows="10" :totalRecords="totalItems"></Paginator> +<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"></Paginator>

Rows Per Page

-

Number of items per page can be changed by the user using a dropdown with the rowsPerPageOptions property which accepts an array of possible values.

+

Number of items per page can be changed by the user using a dropdown with the rowsPerPageOptions property which accepts an array of possible values. + As rows also change when the dropdown changes, use the sync operator for two-way binding.

-<Paginator :first="offset" :rows="10" :totalRecords="totalItems" :rowsPerPageOptions="[10,20,30]"></Paginator> +<Paginator :first.sync="offset" :rows.sync="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"></Paginator>

Template

@@ -41,13 +43,33 @@ import Paginator from 'primevue/paginator'; -<Paginator :first="offset" :rows="10" :totalRecords="totalItems" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"></Paginator> +<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount" + template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"></Paginator> + + +

Custom Content

+

There are two slots available named "left" and "right" to add custom content to these locations. Both slots get + a state object as a slot property to provide the current page, first index and the rows. +

+ +

Page Change Event

-

Paginator provides only one event called page-change along with all the information about the change event

+

Paginator provides only one event called page-change that passes all the information about the change event.

-<Paginator :first="offset" :rows="10" :totalRecords="totalItems" @page-change="onPage($event)"></Paginator> +<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount" @page-change="onPage($event)"></Paginator> @@ -198,6 +220,54 @@ onPage(event) { View on GitHub + +<template> + <div> + <div class="content-section introduction"> + <div class="feature-intro"> + <h1>Paginator</h1> + <p>Paginator is a generic component to display content in paged format.</p> + </div> + </div> + + <div class="content-section implementation"> + <h3 class="first">Default</h3> + <Paginator :first.sync="first" :rows.sync="rows" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator> + + <h3>Custom Template</h3> + <Paginator :first="first2" :rows="rows2" :totalRecords="totalRecords2" @page-change="onPageChangeCustom($event)" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"> + <template #left> + <Button type="button" icon="pi pi-refresh" /> + </template> + <template #right> + <Button type="button" icon="pi pi-search" /> + </template> + </Paginator> + </div> + </div> +</template> + + + +export default { + data() { + return { + first: 0, + rows: 10, + totalRecords: 50, + first2: 0, + rows2: 1, + totalRecords2: 12 + } + }, + methods: { + onPageChangeCustom(event) { + this.first2 = event.first; + this.rows2 = event.rows; + } + } +} +