input field for page selection

README.md

@@ -71,19 +71,19 @@ angular.module('myApp', [require('angular-material-data-table')]);
 
 angular.module('demoApp').controller('sampleController', ['$nutrition', '$scope', function ($nutrition, $scope) {
   'use strict';
-  
+
   $scope.selected = [];
-  
+
   $scope.query = {
     order: 'name',
     limit: 5,
     page: 1
   };
-  
+
   function success(desserts) {
     $scope.desserts = desserts;
   }
-  
+
   $scope.getDesserts = function () {
     $scope.promise = $nutrition.desserts.get($scope.query, success).$promise;
   };
@@ -205,14 +205,14 @@ $scope.editComment = function (event, dessert) {
   // if auto selection is enabled you will want to stop the event
   // from propagating and selecting the row
   event.stopPropagation();
-  
-  /* 
+
+  /*
    * messages is commented out because there is a bug currently
    * with ngRepeat and ngMessages were the messages are always
    * displayed even if the error property on the ngModelController
    * is not set, I've included it anyway so you get the idea
    */
-   
+
   var promise = $mdEditDialog.small({
     // messages: {
     //   test: 'I don\'t like tests!'
@@ -376,6 +376,7 @@ You may use Angular's [number](https://docs.angularjs.org/api/ng/filter/number)
 | `mdOnPaginate`    | `function`     | A callback function for when the page or limit changes. The page is passed as the first argument and the limit is passed as the second argument.    |
 | `mdPage`          | `integer`      | Page number. Pages are not zero indexed. The directive assumes the first page is one. |
 | `mdPageSelect`    | `[expression]` | Display a select dropdown for the page number |
+| `mdPageInput`     | `[expression]` | Display a number input field for the page number |
 | `mdTotal`         | `integer`      | Total number of items. |
 | `ngDisabled`      | `[expression]` | Disable pagination elements. |
 

app/index.html

@@ -36,6 +36,7 @@
           <md-checkbox ng-model="options.boundaryLinks">Pagination Boundary Links</md-checkbox>
           <md-checkbox ng-model="options.limitSelect" ng-click="toggleLimitOptions()">Pagination Limit Select</md-checkbox>
           <md-checkbox ng-model="options.pageSelect">Pagination Page Select</md-checkbox>
+          <md-checkbox ng-model="options.pageInput">Pagination Page Input</md-checkbox>
         </div>
       </md-card>
 
@@ -53,4 +54,4 @@
     <script type="text/javascript" src="scripts/nutritionController.js"></script>
 
   </body>
-</html>
+</html>

app/scripts/nutritionController.js

@@ -9,7 +9,8 @@ angular.module('nutritionApp').controller('nutritionController', ['$http', '$mdE
     largeEditDialog: false,
     boundaryLinks: false,
     limitSelect: true,
-    pageSelect: true
+    pageSelect: true,
+    pageInput: false
   };
 
   $scope.selected = [];
@@ -180,4 +181,4 @@ angular.module('nutritionApp').controller('nutritionController', ['$http', '$mdE
     }, 2000);
   };
 
-}]);
+}]);

app/templates/nutrition-table.html

@@ -74,4 +74,4 @@
   </table>
 </md-table-container>
 
-<data-md-table-pagination md-limit="query.limit" md-limit-options="limitOptions" md-page="query.page" md-total="{{desserts.count}}" md-on-paginate="onPaginate" md-page-select="options.pageSelect" md-boundary-links="options.boundaryLinks"></data-md-table-pagination>
+<data-md-table-pagination md-limit="query.limit" md-limit-options="limitOptions" md-page="query.page" md-total="{{desserts.count}}" md-on-paginate="onPaginate" md-page-select="options.pageSelect && !options.pageInput" md-page-input="options.pageInput && !options.pageSelect" md-boundary-links="options.boundaryLinks"></data-md-table-pagination>

src/scripts/mdTablePagination.js

@@ -82,6 +82,10 @@ function mdTablePagination() {
       return $attrs.mdPageSelect === '' || self.pageSelect;
     };
 
+    self.showPageInput = function () {
+      return $attrs.mdPageInput === '' || self.pageInput;
+    };
+
     $scope.$watch('$pagination.limit', function (newValue, oldValue) {
       if(isNaN(newValue) || isNaN(oldValue) || newValue === oldValue) {
         return;
@@ -116,6 +120,7 @@ function mdTablePagination() {
       limit: '=mdLimit',
       page: '=mdPage',
       pageSelect: '=?mdPageSelect',
+      pageInput: '=?mdPageInput',
       onPaginate: '=?mdOnPaginate',
       limitOptions: '=?mdLimitOptions',
       total: '@mdTotal'
@@ -127,4 +132,4 @@ function mdTablePagination() {
     scope: {},
     templateUrl: 'md-table-pagination.html'
   };
-}
+}

src/styles/md-table-pagination.less

@@ -33,6 +33,18 @@
     }
   }
 
+  md-input-container {
+      justify-content: flex-end;
+      min-width: 30px;
+      height: 28px;
+      input {
+          color: @md-dark-secondary;
+          height: 24px;
+          min-width: 32px;
+          text-align: right;
+      }
+  }
+
   > * {
     display: flex;
     align-items: center;
@@ -55,4 +67,4 @@
       margin-left: 20px;
     }
   }
-}
+}

src/templates/md-table-pagination.html

@@ -8,6 +8,14 @@
   </md-select>
 </div>
 
+<div class="page-input" ng-if="$pagination.showPageInput()">
+  <div class="label">{{$pagination.label.page}}</div>
+
+  <md-input-container md-no-float md-container-class="md-pagination-input" ng-disabled="$pagination.disabled" aria-label="Page">
+    <input type="number" class="md-page-input" name="mdPageInput" ng-model="$pagination.page" ng-model-options="{ debounce: 150 }" ng-change="$pagination.onPaginationChange()" min="1" max="{{$pagination.pages()}}">
+  </md-input-container>
+</div>
+
 <div class="limit-select" ng-if="$pagination.limitOptions">
   <div class="label">{{$pagination.label.rowsPerPage}}</div>
 
@@ -34,4 +42,4 @@
   <md-button class="md-icon-button" type="button" ng-if="$pagination.showBoundaryLinks()" ng-click="$pagination.last()" ng-disabled="$pagination.disabled || !$pagination.hasNext()" aria-label="Last">
     <md-icon md-svg-icon="navigate-last.svg"></md-icon>
   </md-button>
-</div>
+</div>