Add rows per page options. Fixed #159

primefaces · Apr 2, 2016 · 1ba729d · 1ba729d
1 parent fded548
commit 1ba729d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/components/paginator/paginator.ts b/components/paginator/paginator.ts
@@ -25,6 +25,9 @@ import {Component,ElementRef,Input,Output,SimpleChange,EventEmitter} from 'angul
                     (click)="changePageToLast()" [ngClass]="{'ui-state-disabled':isLastPage(),'ui-state-hover':(lastlink === hoveredItem  && !isLastPage())}">
                 <span class="fa fa-step-forward"></span>
             </span>
+            <select class="ui-paginator-rpp-options ui-widget ui-state-default" *ngIf="rowsPerPageOptions" (change)="onRppChange($event)">
+                <option *ngFor="#opt of rowsPerPageOptions" [value]="opt" [selected]="rows == opt">{{opt}}</option>
+            </select>
         </div>
     `
 })
@@ -41,6 +44,8 @@ export class Paginator {
     @Input() style: string;
 
     @Input() styleClass: string;
+
+    @Input() rowsPerPageOptions: number[];
 
     pageLinks: number[];
 
@@ -97,7 +102,7 @@ export class Paginator {
         var pc = this.getPageCount();
 
         if(p >= 0 && p < pc) {
-            this.first = this.rows *p;
+            this.first = this.rows * p;
             var state = {
                 first: this.first,
                 rows: this.rows,
@@ -129,4 +134,9 @@ export class Paginator {
     changePageToLast() {
         this.changePage(this.getPageCount() - 1);
     }
+
+    onRppChange(event) {
+        this.rows = this.rowsPerPageOptions[event.target.selectedIndex];
+        this.changePageToFirst();
+    }
 }
diff --git a/showcase/demo/paginator/paginatordemo.html b/showcase/demo/paginator/paginatordemo.html
@@ -6,7 +6,7 @@
 </div>
 
 <div class="ContentSideSections Implementation">
-    <p-paginator rows="10" totalRecords="100"></p-paginator>
+    <p-paginator rows="10" totalRecords="120" [rowsPerPageOptions]="[10,20,30]"></p-paginator>
 </div>
 
 <div class="ContentSideSections Source">
@@ -41,6 +41,14 @@ <h3>PageLinks</h3>
 <code class="language-markup" pCode>
 &lt;p-paginator rows="10" totalRecords="100" pageLinkSize="3"&gt;&lt;/p-paginator&gt;
 </code>
+</pre>
+
+            <h3>Rows Per Page</h3>
+            <p>Number of items per page can be changed by the user using a dropdown if you define rowsPerPageOptions as an array of possible values.</p>
+<pre>
+<code class="language-markup" pCode>
+&lt;p-paginator rows="10" totalRecords="120" [rowsPerPageOptions]="[10,20,30]"&gt;&lt;/p-paginator&gt;
+</code>
 </pre>
 
             <h3>Attributes</h3>
@@ -79,6 +87,12 @@ <h3>Attributes</h3>
                             <td>5</td>
                             <td>Number of page links to display.</td>
                         </tr>
+                        <tr>
+                            <td>rowsPerPageOptions</td>
+                            <td>array</td>
+                            <td>null</td>
+                            <td>Array of integer values to display inside rows per page dropdown.</td>
+                        </tr>
                         <tr>
                             <td>style</td>
                             <td>string</td>
@@ -178,6 +192,10 @@ <h3>Styling</h3>
                             <td>ui-paginator-last</td>
                             <td>Last page element.</td>
                         </tr>
+                        <tr>
+                            <td>ui-paginator-rpp-options</td>
+                            <td>Rows per page dropdown.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -189,7 +207,7 @@ <h3>Dependencies</h3>
         <p-tabPanel header="Source">
 <pre>
 <code class="language-markup" pCode>
-&lt;p-paginator rows="10" totalRecords="100"&gt;&lt;/p-paginator&gt;
+&lt;p-paginator rows="10" totalRecords="120" [rowsPerPageOptions]="[10,20,30]"&gt;&lt;/p-paginator&gt;
 </code>
 </pre>
         </p-tabPanel>