paging

src/main/resources/public/index.html

@@ -46,15 +46,22 @@ SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony
 <script src="js/metisMenu.min.js"></script>
 <script src="js/custom.js"></script>
 <!--	angularjs app-->
-	<script src="js/angular.js"></script>
+<!--	<script src="js/angular.js"></script>-->
+	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
+
 	<script src="js/angular-route.js"></script>
 	<script src="js/angular-ui-router.min.js"></script>
+
+
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
+    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
+
+
 	<script src="js/app.js"></script>
 	<script src="pages/employee/employeeController.js"></script>
 	<script src="pages/employee/createEmployeeController.js"></script>
-	<script src="js/ui-bootstrap-tpls-0.3.0.min.js"></script>
-	<script src="js/dirPagination.js"></script>
-	<script src="js/ui-bootstrap-tpls-0.3.0.min.js"></script>
+
 <!--    <link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">-->
 	<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
 `

src/main/resources/public/js/app.js

 /**
  *
  */
-angular.module("myApp", ["ui.router","ui.bootstrap"]).config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
+angular.module("myApp", ["ngAnimate","ui.router","ui.bootstrap"]).config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
 
     $locationProvider.hashPrefix('');
     $urlRouterProvider.otherwise("/employees");
@@ -36,3 +36,17 @@ angular.module("myApp", ["ui.router","ui.bootstrap"]).config(function ($statePro
 
 
 });
+
+    angular
+        .module('myApp')
+        .filter('lmto', lmto);
+
+    function lmto() {
+        return function(items,limit,offset){
+            if(items.length > 0) {
+                return items.slice(offset, offset + limit);
+            } else {
+                return [];
+            }
+        };
+    }

src/main/resources/public/pages/employee/employee.html

@@ -7,6 +7,7 @@
             </tr>
             <h4>{{emp.length}}</h4>
 
+            <input ng-model="keyword" type="text" placeholder="Tìm kiếm" ng-change="currentPage =1">
             <table class="table" >
                 <thead>
                 <tr>
@@ -27,8 +28,7 @@
                 </tr>
                 </thead>
                 <tbody>
-                <tr class="vide" ng-repeat="emp in filteredEmployee ">
-                    {{emp.text}}
+                <tr class="vide" ng-repeat="emp in employess | filter:{username:keyword} | lmto:3:3*(currentPage-1) track by $index">
                     <td>{{$index + 1}}</td>
                     <td>{{emp.username}}</td>
                     <td>{{emp.firstName}}</td>
@@ -49,10 +49,9 @@
                 </tbody>
             </table>
 
-          <div ng-if="dataHasLoaded" data-pagination="" data-num-pages="numberOfPage()"
-          data-current-page="currentPage" data-max-size="maxSize"
-          data-boundary-links="true"></div>
 
+<!--            <uib-pagination ng-if="employess.length" total-items="getTotalItems()"  boundary-link-numbers="true" ng-model="currentPage" ng-change="pageChangedIndex()"  rotate="true" items-per-page="employeePerPage"></uib-pagination>-->
+            <uib-pagination  total-items="getTotalItems()"  boundary-link-numbers="true" ng-model="currentPage" ng-change="pageChangedIndex()"  rotate="true" items-per-page="employeePerPage"></uib-pagination>
 
 
 

src/main/resources/public/pages/employee/employeeController.js

 /**
  *
  */
-angular.module("myApp").controller("employeeController", function ($scope, $http, $state) {
+angular.module("myApp").controller("employeeController", function ($scope, $http, $state, $filter) {
     console.log("Employee controller");
 
     $scope.emp = {
@@ -20,13 +20,37 @@ angular.module("myApp").controller("employeeController", function ($scope, $http
 
 
     $scope.save = save;
-
+    $scope.employess = [];
 
     $scope.currentPage = 1;
     $scope.employeePerPage = 3;
     $scope.maxSize = 5;
+    this.emp = $scope.employess;
     $scope.numberOfPage = numberOfPage;
     $scope.dataHasLoaded = false;
+    $scope.makeEmployee = function () {
+        $scope.employess = [];
+        for (i = 1; i <= 100; i++) {
+            $scope.employess.push({text: 'emp ' + i, done: false});
+        }
+    };
+    $scope.makeEmployee();
+    $scope.getAllEmp = getAllEmp;
+    $scope.getTotalItems = getTotalItems;
+    $scope.keyword = "";
+
+    // end declare
+
+    getAllEmp();
+
+
+    function getTotalItems() {
+        return $filter('filter')($scope.employess, {'username': $scope.keyword}).length;
+    }
+
+    $scope.pageChangedIndex = function(){
+        console.log($scope.currentPage);
+    }
 
     function numberOfPage() {
         return Math.ceil($scope.employess.length / $scope.employeePerPage);
@@ -82,26 +106,30 @@ angular.module("myApp").controller("employeeController", function ($scope, $http
         $scope.emp.position = emp.position;
     };
 
+    function getAllEmp(){
+        $http({
+            method: 'GET',
+            url: "http://localhost:8081/list_employee/"
+        }).then(function successCallback(response) {
+            console.log(response);
+            $scope.employess = response.data;
+        }, function errorCallback(response) {
+            console.log(response)
+        });
 
-    $http({
-        method: 'GET',
-        url: "http://localhost:8081/list_employee/"
-    }).then(function successCallback(response) {
-        console.log(response);
-
-        $scope.employess = response.data;
-
-        $scope.dataHasLoaded = true;
+    }
 
-        $scope.$watch('currentPage + numPerPage', function () {
-            var begin = (($scope.currentPage - 1) * $scope.employeePerPage),
-                end = begin + $scope.employeePerPage;
 
-            $scope.filteredEmployee = $scope.employess.slice(begin, end);
-        });
-    }, function errorCallback(response) {
-        console.log(response)
-    });
+    // $http({
+    //     method: 'GET',
+    //     url: "http://localhost:8081/list_employee/"
+    // }).then(function successCallback(response) {
+    //     console.log(response);
+    //
+    //     $scope.employess = response.data;
+    // }, function errorCallback(response) {
+    //     console.log(response)
+    // });
 
 });