Fixed #163

primefaces · Oct 31, 2017 · 716d3c6 · 716d3c6
1 parent 48b9d9c
commit 716d3c6
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 8 deletions.
diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js
@@ -27,6 +27,7 @@ export class DataTable extends Component {
         first: null,
         rows: null,
         totalRecords: null,
+        rowsPerPageOptions: null,
         lazy: false,
         sortField: null,
         sortOrder: null,
@@ -98,6 +99,7 @@ export class DataTable extends Component {
         first: PropTypes.number,
         rows: PropTypes.number,
         totalRecords: PropTypes.number,
+        rowsPerPageOptions: PropTypes.array,
         lazy: PropTypes.bool,
         sortField: PropTypes.string,
         sortOrder: PropTypes.number,
@@ -197,7 +199,7 @@ export class DataTable extends Component {
         let className = 'ui-paginator-' + position;
 
         return <Paginator first={this.state.first} rows={this.state.rows} className={className} onPageChange={this.onPageChange} template={this.props.paginatorTemplate}
-                          totalRecords={totalRecords} />;
+                          totalRecords={totalRecords} rowsPerPageOptions={this.props.rowsPerPageOptions}/>;
     }
 
     onSort(event) {

diff --git a/src/components/paginator/Paginator.css b/src/components/paginator/Paginator.css
@@ -25,6 +25,7 @@
 	margin-left: .063em;
 	margin-right: .063em;
 	text-decoration: none;
+    vertical-align: middle;
 }
 
 .ui-paginator .ui-paginator-page,
@@ -53,4 +54,9 @@
 
 .ui-paginator a.ui-state-disabled {
     outline: 0 none;
+}
+
+.ui-paginator .ui-dropdown {
+    min-width: 4em;
+    margin-left: .375em;
 }
diff --git a/src/components/paginator/Paginator.js b/src/components/paginator/Paginator.js
@@ -132,8 +132,7 @@ export class Paginator extends Component {
     }
 
     onRowsChange(event) {
-        this.changePage(0, this.props.rowsPerPageOptions[event.target.selectedIndex]);
-        event.preventDefault();
+        this.changePage(0, event.value);
     }
 
     render() {
@@ -165,7 +164,7 @@ export class Paginator extends Component {
                 break;
 
                 case 'RowsPerPageDropdown':
-                    element = <RowsPerPageDropdown key={key} options={this.props.rowsPerPageOptions} onChange={this.onRowsChange} />;
+                    element = <RowsPerPageDropdown key={key} value={this.props.rows} options={this.props.rowsPerPageOptions} onChange={this.onRowsChange} />;
                 break;
 
                 case 'CurrentPageReport':

diff --git a/src/components/paginator/RowsPerPageDropdown.js b/src/components/paginator/RowsPerPageDropdown.js
@@ -1,23 +1,30 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import {Dropdown} from '../dropdown/Dropdown';
 
 export class RowsPerPageDropdown extends Component {
 
     static defaultProps = {
         options: null,
+        value: null,
         onChange: null
     }
 
     static propsTypes = {
         options: PropTypes.array,
+        value: PropTypes.number,
         onChange: PropTypes.func
     }
 
     render() {
         if(this.props.options) {
-            let options = this.props.options.map((opt, i) => <option key={opt} value={opt}>{opt}</option>);
+            let options = this.props.options.map((opt, i) => {
+                return {label: opt, value: opt};
+            });
 
-            return <select className="ui-paginator-rpp-options ui-widget ui-state-default" onChange={this.props.onChange}>{options}</select>;
+            return (
+                <Dropdown value={this.props.value} options={options} onChange={this.props.onChange} />
+            );
         }
         else {
             return null;

diff --git a/src/showcase/datatable/DataTablePaginatorDemo.js b/src/showcase/datatable/DataTablePaginatorDemo.js
@@ -33,7 +33,7 @@ export class DataTablePaginatorDemo extends Component {
                 </div>
 
                 <div className="content-section implementation">
-                    <DataTable value={this.state.cars} paginator={true} rows={10}>
+                    <DataTable value={this.state.cars} paginator={true} rows={10} rowsPerPageOptions={[5,10,20]} >
                         <Column field="vin" header="Vin" />
                         <Column field="year" header="Year" />
                         <Column field="brand" header="Brand" />
@@ -90,7 +90,7 @@ export class DataTablePaginatorDemo extends Component {
                 </div>
 
                 <div className="content-section implementation">
-                    <DataTable value={this.state.cars} paginator={true} rows={10}>
+                    <DataTable value={this.state.cars} paginator={true} rows={10} rowsPerPageOptions={[5,10,20]}>
                         <Column field="vin" header="Vin" />
                         <Column field="year" header="Year" />
                         <Column field="brand" header="Brand" />