Demo update for currentPageReport

primefaces · Mar 9, 2020 · 1467ae6 · 1467ae6
1 parent 46e682e
commit 1467ae6
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/src/components/paginator/CurrentPageReport.js b/src/components/paginator/CurrentPageReport.js
@@ -28,7 +28,7 @@ export class CurrentPageReport extends Component {
             .replace("{first}", this.props.first + 1)
             .replace("{last}", this.props.first + this.props.rows)
             .replace("{rows}", this.props.rows)
-            .replace("{totalRecords}", this.props.pageCount);
+            .replace("{totalRecords}", this.props.totalRecords);
 
         return <span className="p-paginator-current">{text}</span>
     }

diff --git a/src/sass/layout/_content.scss b/src/sass/layout/_content.scss
@@ -713,6 +713,12 @@
             }
         }
 
+        .datatable-paginator-demo {
+            .p-paginator-current {
+                float: right
+            }
+        }
+
         .lightbox-demo {
             .p-lightbox-image-target {
                 margin-right: .5em;

diff --git a/src/showcase/datatable/DataTableDemo.js b/src/showcase/datatable/DataTableDemo.js
@@ -233,7 +233,7 @@ export class DataTableDemo extends Component {
                     <DataTable ref={(el) => this.dt = el} value={this.state.customers}
                         header={header} responsive className="p-datatable-customers" dataKey="id" rowHover globalFilter={this.state.globalFilter}
                         selection={this.state.selectedCustomers} onSelectionChange={e => this.setState({selectedCustomers: e.value})}
-                        paginator rows={10} emptyMessage="No customers found"
+                        paginator rows={10} emptyMessage="No customers found" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                         paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" rowsPerPageOptions={[10,25,50]}>
                         <Column selectionMode="multiple" style={{width:'3em'}}/>
                         <Column field="name" header="Name" sortable filter filterPlaceholder="Search by name" />
@@ -3036,7 +3036,7 @@ export class DataTableDemo extends Component {
                     <DataTable ref={(el) => this.dt = el} value={this.state.customers}
                         header={header} responsive className="p-datatable-customers" dataKey="id" rowHover globalFilter={this.state.globalFilter}
                         selection={this.state.selectedCustomers} onSelectionChange={e => this.setState({selectedCustomers: e.value})}
-                        paginator rows={10} emptyMessage="No customers found"
+                        paginator rows={10} emptyMessage="No customers found" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                         paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" rowsPerPageOptions={[10,25,50]}>
                         <Column selectionMode="multiple" style={{width:'3em'}}/>
                         <Column field="name" header="Name" sortable filter filterPlaceholder="Search by name" />

diff --git a/src/showcase/datatable/DataTablePaginatorDemo.js b/src/showcase/datatable/DataTablePaginatorDemo.js
@@ -23,10 +23,10 @@ export class DataTablePaginatorDemo extends Component {
     }
 
     render() {
-        let paginatorLeft = <Button icon="pi pi-refresh"/>;
-        let paginatorRight = <Button icon="pi pi-cloud-upload"/>;
+        const paginatorLeft = <Button icon="pi pi-refresh"/>;
+
         return (
-            <div>
+            <div className="datatable-paginator-demo">
                 <DataTableSubmenu />
 
                 <div className="content-section introduction">
@@ -41,7 +41,9 @@ export class DataTablePaginatorDemo extends Component {
                 </div>
 
                 <div className="content-section implementation">
-                    <DataTable value={this.state.cars} paginator={true} paginatorLeft={paginatorLeft} paginatorRight={paginatorRight} rows={10} rowsPerPageOptions={[5,10,20]} >
+                    <DataTable value={this.state.cars} paginator={true} paginatorLeft={paginatorLeft}  
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" rows={10} rowsPerPageOptions={[5,10,20]} >
                         <Column field="vin" header="Vin" />
                         <Column field="year" header="Year" />
                         <Column field="brand" header="Brand" />
@@ -88,19 +90,25 @@ export class DataTablePaginatorDemo extends Component {
     }
 
     render() {
-        let paginatorLeft = <Button icon="pi pi-refresh"/>;
-        let paginatorRight = <Button icon="pi pi-cloud-upload"/>;
+        const paginatorLeft = <Button icon="pi pi-refresh"/>;
+
         return (
-            <div>
+            <div className="datatable-paginator-demo">
                 <div className="content-section introduction">
                     <div className="feature-intro">
                         <h1>DataTable - Paginator</h1>
                         <p>Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display.</p>
+
+                        <AppContentContext.Consumer>
+                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
+                        </AppContentContext.Consumer>
                     </div>
                 </div>
 
                 <div className="content-section implementation">
-                    <DataTable value={this.state.cars} paginator={true} paginatorLeft={paginatorLeft} paginatorRight={paginatorRight} rows={10} rowsPerPageOptions={[5,10,20]}>
+                    <DataTable value={this.state.cars} paginator={true} paginatorLeft={paginatorLeft}  
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" rows={10} rowsPerPageOptions={[5,10,20]} >
                         <Column field="vin" header="Vin" />
                         <Column field="year" header="Year" />
                         <Column field="brand" header="Brand" />