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

Fixed #230 - More options for currentPageReportTemplate

pull/256/head
cagataycivici 2020-03-16 22:04:02 +03:00
parent 876c96f2b9
commit ee76fbb1c9
3 changed files with 52 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/paginator/CurrentPageReport.vue
View File

@ -5,8 +5,26 @@
export default {
inheritAttrs: false,
props: {
pageCount: Number,
page: Number,
pageCount: {
type: Number,
default: 0
},
page: {
type: Number,
default: 0
},
first: {
type: Number,
default: 0
},
rows: {
type: Number,
default: 0
},
totalRecords: {
type: Number,
default: 0
},
template: {
type: String,
default: '({currentPage} of {totalPages})'
@ -14,7 +32,15 @@
},
computed: {
text() {
return this.template.replace("{currentPage}", this.page + 1).replace("{totalPages}", this.pageCount);
let text = this.template
.replace("{currentPage}", this.page + 1)
.replace("{totalPages}", this.pageCount)
.replace("{first}", this.first + 1)
.replace("{last}", Math.min(this.first + this.rows, this.totalRecords))
.replace("{rows}", this.rows)
.replace("{totalRecords}", this.totalRecords);
return text;
}
}
}

6
src/components/paginator/Paginator.vue
View File

@ -9,8 +9,10 @@
<NextPageLink v-else-if="item === 'NextPageLink'" :key="item" @click="changePageToNext($event)" :disabled="isLastPage" />
<LastPageLink v-else-if="item === 'LastPageLink'" :key="item" @click="changePageToLast($event)" :disabled="isLastPage" />
<PageLinks v-else-if="item === 'PageLinks'" :key="item" :value="pageLinks" :page="page" @click="changePageLink($event)" />
<CurrentPageReport v-else-if="item === 'CurrentPageReport'" :key="item" :template="currentPageReportTemplate" :page="page" :pageCount="pageCount" />
<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :key="item" :rows="d_rows" :options="rowsPerPageOptions" @rows-change="onRowChange($event)" />
<CurrentPageReport v-else-if="item === 'CurrentPageReport'" :key="item" :template="currentPageReportTemplate"
:page="page" :pageCount="pageCount" :first="d_first" :rows="d_rows" :totalRecords="totalRecords" />
<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :key="item" :rows="d_rows"
:options="rowsPerPageOptions" @rows-change="onRowChange($event)" />
</template>
<div class="p-paginator-right-content" v-if="$scopedSlots.right">
<slot name="right" :state="currentState"></slot>

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

@ -52,10 +52,18 @@ import Paginator from 'primevue/paginator';
<li>CurrentPageReport</li>
</ul>
<CodeHighlight>
&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"&gt;&lt;/Paginator&gt;
</CodeHighlight>
<h3>CurrentPageReport</h3>
<p>Current page report item in the itemplate 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
@ -65,9 +73,9 @@ import Paginator from 'primevue/paginator';
<template v-pre>
&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;
&lt;template #left="slotProps"&gt;
Page: {{slotProps.state.page}}
First: {{slotProps.state.first}}
Rows: {{slotProps.state.rows}}
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;
@ -142,8 +150,10 @@ onPage(event) {
<tr>
<td>currentPageReportTemplate</td>
<td>string</td>
<td>({currentPage} of {totalPages})</td>
<td>Template of the current page report element.</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>