diff --git a/src/components/paginator/CurrentPageReport.vue b/src/components/paginator/CurrentPageReport.vue index 90b61bafd..71f1dc6ce 100644 --- a/src/components/paginator/CurrentPageReport.vue +++ b/src/components/paginator/CurrentPageReport.vue @@ -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; } } } diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue index dbde6c6a3..131018cb9 100644 --- a/src/components/paginator/Paginator.vue +++ b/src/components/paginator/Paginator.vue @@ -9,8 +9,10 @@ - - + +
diff --git a/src/views/paginator/PaginatorDoc.vue b/src/views/paginator/PaginatorDoc.vue index c4b49ad47..d51775d3b 100644 --- a/src/views/paginator/PaginatorDoc.vue +++ b/src/views/paginator/PaginatorDoc.vue @@ -52,10 +52,18 @@ import Paginator from 'primevue/paginator';
  • CurrentPageReport
  • - -<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount" - template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"></Paginator> - +

    CurrentPageReport

    +

    Current page report item in the itemplate displays information about the pagination state. Default value is ({currentPage} of {totalPages}) + whereas available placeholders are the following; +

    +
      +
    • {currentPage}
    • +
    • {totalPages}
    • +
    • {rows}
    • +
    • {first}
    • +
    • {last}
    • +
    • {totalRecords}
    • +

    Custom Content

    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';