Added a basic pagination table (md-data-table)

Now you have pagination, Page, Rows per page, and ordering.

Author: hi

src/app/components/services/TableService.js

@@ -59,9 +59,29 @@
       }
     ];
 
+    function PickRandom() {
+      return Object.assign({}, tableData[Math.floor(Math.random()*tableData.length)]);
+    }
+
     return {
       loadAllItems : function() {
         return $q.when(tableData);
+      },
+      /**
+       * Query expects that `limit`,`page`, and `order` fields be present
+       */
+      loadByPagination: function (query) {
+        query = query || {limit:10,page:1};
+         
+        var list = [];
+        var start = (query.page-1)*query.limit;
+        var end = start + query.limit;
+        for (var i = start; i < end; i++) {
+          var f = PickRandom();
+          f.id = i+1;
+          list.push(f);
+        }
+        return $q.when({items:list,count:800});
       }
     };
   }

src/app/controllers/DataTableController.js

@@ -4,19 +4,60 @@
     .module('app')
     .controller('DataTableController', [
       'tableService',
+      '$scope',
       TableController
+      
     ]);
 
-  function TableController(tableService) {
+  function TableController(tableService , $scope) {
     var vm = this;
 
     vm.tableData = [];
+    vm.totalItems = 0;
 
-    tableService
-      .loadAllItems()
-      .then(function(tableData) {
-        vm.tableData = [].concat(tableData);
+    $scope.selected = [];
+
+    $scope.query = {
+      order: 'name',
+      limit: 10,
+      page: 1
+    };
+    $scope.selected = [];
+
+    $scope.render = function (T) {
+      return T;
+    }
+    var lastQuery = null;
+    vm.getItems = function () { 
+      /**
+       * I don't know why this function is being called too many times,
+       * it supposed to call once per pagination, so the next 3 lines are only to avoid
+       * multiple requests. 
+       */
+      var query = JSON.stringify($scope.query);
+      if (query == lastQuery) return;
+      lastQuery = query;
+      GetItemsData($scope.query);
+      
+    }
+
+    function GetItemsData(query) {
+      tableService
+      .loadByPagination(query)
+      .then(function(tableData) { 
+        vm.tableData =  tableData.items;
+        // Represents the count of database count of records, not items array!
+        vm.totalItems = tableData.count;
+        
       });
+
+    } 
+    
+    GetItemsData($scope.query);
+    
+
+
+    
   }
 
 })();

src/app/views/data-table.html

@@ -1,26 +1,41 @@
 <!-- TODO: Replace table to table component when https://github.com/angular/material/issues/796 will closed -->
-<div class="table-responsive-vertical md-whiteframe-z1">
-    <table id="table" class="table table-hover table-bordered">
-        <thead>
-        <tr>
-            <th>#</th>
-            <th>Issue</th>
-            <th>Status</th>
-            <th>Progress</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr ng-repeat="data in vm.tableData track by $index">
-            <td data-title="ID">{{$index + 1}}</td>
-            <td data-title="Issue">{{data.issue}}</td>
-            <td data-title="Status">{{data.status}}</td>
-            <td data-title="Progress">
-                <md-progress-linear class="table-progress {{data.class}}"
-                                    md-mode="determinate"
-                                    value={{data.progress}}>
-                </md-progress-linear>
-            </td>
-        </tr>
-        </tbody>
-    </table>
+<md-toolbar class="md-table-toolbar md-default">
+  <div class="md-toolbar-tools">
+    <span>Nutrition</span>
 </div>
+</md-toolbar>
+
+<!-- exact table from live demo -->
+<md-table-container>
+  <table md-table md-row-select multiple ng-model="selected" >
+    <thead md-head md-order="query.order" md-on-reorder="vm.getItems()">
+      <tr md-row>
+        <th md-column md-numeric>ID</th>
+        <th md-column md-order-by="nameToLower"><span>Dessert (100g serving)</span></th>
+        <th md-column md-numeric md-order-by="calories.value"><span>Calories</span></th>
+        <th md-column md-numeric>Fat (g)</th>
+        <th md-column md-numeric>Carbs (g)</th>
+       
+      </tr>
+    </thead>
+    <tbody md-body>
+      <tr md-row md-select="item" md-select-id="name" md-auto-select ng-repeat="item in vm.tableData">
+        <td md-cell>{{item.id}}</td>
+        <td md-cell>{{item.issue}}</td>
+        <td md-cell>{{item.progress}}</td>
+        <td md-cell>{{item.status}}</td>
+        <td md-cell>
+            <md-progress-linear class="table-progress {{item.class}}"
+                md-mode="determinate"
+                value={{item.progress}}>
+            </md-progress-linear>
+        </td>
+
+        
+        
+      </tr>
+    </tbody>
+  </table>
+</md-table-container>
+
+<md-table-pagination md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page" md-total="{{vm.totalItems}}" md-on-paginate="vm.getItems()" md-page-select></md-table-pagination>