Commits

Endy Muhardin committed a2c0b0e

implement pagination

Comments (0)

Files changed (3)

belajar-restful-web/src/main/webapp/js/aplikasi-controller.js

         }
     }])
     .controller('SystemMenuController', ['$scope', 'SystemMenuService', function($scope, SystemMenuService){
-        $scope.menus = SystemMenuService.query();
-        
+        $scope.currentPage = 0;
+        $scope.reloadMenupage = function(page){
+            if(!page) {
+                page = 0;
+            }
+
+            $scope.menupage = SystemMenuService.query(page, function(){
+                $scope.pages = _.range(1, ($scope.menupage.totalPages+1));
+            });
+        }
+
+        $scope.reloadMenupage(); 
+
         $scope.edit = function(x){
             if(x.id == null){
                 return; 
             $scope.parentSelection = _.filter($scope.menus, function(m){
                 return m.id != x.id;
             });
-            console.log($scope.parentSelection);
         };
         $scope.baru = function(){
             $scope.currentMenu = null;
         $scope.simpan = function(){
             SystemMenuService.save($scope.currentMenu)
             .success(function(){
-                $scope.menus = SystemMenuService.query();
+                $scope.reloadMenupage();
                 $scope.baru();
             });
         }
                 return;
             }
             SystemMenuService.remove(x).success(function(){
-                $scope.menus = SystemMenuService.query();
+                $scope.reloadMenupage();
             });
         }
         $scope.isClean = function(){

belajar-restful-web/src/main/webapp/js/aplikasi-service.js

     }])
     .factory('SystemMenuService', ['$resource', '$http', function($resource, $http){
         var service = {
-            menu: $resource('/menu/:id'),
+            menu: $resource('/menu/:id', {}, {
+                queryPage: {method:'GET', isArray: false}
+            }),
             get: function(param, callback){ return this.menu.get(param, callback) }, 
-            query: function(){ return this.menu.query() },
+            query: function(p, callback){ return this.menu.queryPage({"page.page": p, "page.size": 10}, callback) },
             save: function(obj){
                 if(obj.id == null){
                     return $http.post('/menu', obj);

belajar-restful-web/src/main/webapp/pages/system/menu.html

         <table class="table table-striped table-bordered table-condensed">
             <thead>
                 <tr>
+                    <th>No</th>
                     <th>Label</th>
                     <th>Action</th>
                     <th>Parent</th>
                 </tr>
             </thead>
             <tbody>
-                <tr ng-repeat="c in menus">
+                <tr ng-repeat="c in menupage.content">
+                    <td>{{$index + 1}}</td>
                     <td>{{c.label}}</td>
                     <td>{{c.action}}</td>
                     <td>{{c.parent.label}}</td>
                 </tr>
             </tbody>
         </table>
+        <div class="pagination pagination-centered">
+            <ul>
+                <li><a ng-click="reloadMenupage(1)">First</a></li>
+                <li ng-class="{disabled: menupage.firstPage}">
+                    <a ng-click="reloadMenupage(menupage.number - 1)">
+                        Prev
+                    </a>
+                </li>
+                <li ng-repeat="p in pages">
+                    <a ng-click="reloadMenupage(p)">{{p}}</a>
+                </li>
+                <li ng-class="{disabled: menupage.lastPage}">
+                    <a ng-click="reloadMenupage(menupage.number + 1)">
+                        Next
+                    </a>
+                </li>
+                <li><a ng-click="reloadMenupage(pages.length)">Last</a></li>
+            </ul>
+        </div>
     </div>
 </div>