luticate
/
front-backoffice
ウォッチ 1
スター 0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 3 Wiki アクティビティ
ソースを参照

users pagination

develop
Robin Thoni 9年前
親
1ed910810f
コミット
d386072661
5個のファイルの変更、70行の追加、11行の削除
分割表示 差分情報を表示
  1. 35
    2
      luticate/controllers/users.controller.js
  2. 9
    2
      luticate/css/app.less
  3. 1
    5
      luticate/views/footer.html
  4. 1
    1
      luticate/views/navbar.html
  5. 24
    1
      luticate/views/users.html

+ 35
- 2
luticate/controllers/users.controller.js ファイルの表示 

@@ -1,5 +1,38 @@
1 1 
 angular.module('luticate')
2 
-    .controller('UsersController', ['$scope', '$state', 'luticatePromises',
3 
-        function($scope, $state, luticatePromises) {
2 
+    .controller('UsersController', ['$scope', '$state', 'luticateAuthUsers',
3 
+        function($scope, $state, luticateAuthUsers) {
4 
+            $scope.page = 0;
5 
+            $scope.perPage = 20;
6 
+            $scope.users = [];
7 
+            $scope.pages = [];
4 8
9 
+            var promiseUsers = {
10 
+                id: "promiseUsers",
11 
+                groups: ['userList']
12 
+            };
13 
+
14 
+            $scope.loadUsers = function()
15 
+            {
16 
+                luticateAuthUsers.getAll({page: $scope.page, perPage: $scope.perPage}, promiseUsers)
17 
+                    .then(function(users)
18 
+                    {
19 
+                        $scope.users = users;
20 
+                        $scope.pages = [];
21 
+                        var start = Math.max(0, $scope.page - 5);
22 
+                        var end = Math.min(start + 10, (users.Count / $scope.perPage) + (users.Count % $scope.perPage == 0 ? -1 : 0));
23 
+                        for (var i = start; i < end; ++i) {
24 
+                            $scope.pages.push(i);
25 
+                        }
26 
+                    }, function(error)
27 
+                    {
28 
+                    });
29 
+            };
30 
+
31 
+            $scope.goToPage = function(page)
32 
+            {
33 
+                $scope.page = page;
34 
+                $scope.loadUsers();
35 
+            };
36 
+
37 
+            $scope.loadUsers();
5 38 
     }]);

+ 9
- 2
luticate/css/app.less ファイルの表示 

@@ -2,8 +2,6 @@ body {
2 2 
   padding-top: 70px;
3 3 
 }
4 4
5 
-
6 
-
7 5 
 .caption {
8 6 
   height: 100%;
9 7 
   overflow: hidden;
 
@@ -40,3 +38,12 @@ body {
40 38 
 footer {
41 39 
   margin: 50px 0;
42 40 
 }
41 
+
42 
+
43 
+.pagination-current {
44 
+  font-weight: bold;
45 
+}
46 
+
47 
+.pagination-not-current {
48 
+
49 
+}

+ 1
- 5
luticate/views/footer.html ファイルの表示 

@@ -13,8 +13,4 @@
13 13 
         </div>
14 14 
     </footer>
15 15
16 
-</div>
17 
-
18 
-</body>
19 
-
20 
-</html>
16 
+</div>

+ 1
- 1
luticate/views/navbar.html ファイルの表示 

@@ -1,4 +1,4 @@
1 
-<body>
1 
+
2 2 
 <!-- Navigation -->
3 3 
 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="NavBarController">
4 4 
     <div class="container">

+ 24
- 1
luticate/views/users.html ファイルの表示 

@@ -1,7 +1,30 @@
1 1 
 <!-- Page Content -->
2 2 
 <div class="container">
3 3
4 
-    <div class="row">
4 
+    <div class="row col-sm-8 col-sm-offset-2">
5 
+
6 
+        <table class="col-sm-12 table" lu-busy="userList">
7 
+            <thead>
8 
+                <tr>
9 
+                    <th class="col-sm-2">Id</th>
10 
+                    <th class="col-sm-3">Username</th>
11 
+                    <th class="col-sm-3">Email</th>
12 
+                    <th class="col-sm-3">Profile Id</th>
13 
+                </tr>
14 
+            </thead>
15 
+            <tbody>
16 
+                <tr ng-repeat="user in users.Data">
17 
+                    <td>{{ user.Id }}</td>
18 
+                    <td>{{ user.Username }}</td>
19 
+                    <td>{{ user.Email }}</td>
20 
+                    <td>{{ user.ProfileId }}</td>
21 
+                </tr>
22 
+            </tbody>
23 
+        </table>
24 
+
25 
+        <div class="col-sm-12 text-center">
26 
+            <a class="{{ p == page ? 'pagination-current' : 'pagination-not-current'}}" href="" ng-repeat="p in pages" ng-click="goToPage(p)">{{ p + 1 }}&nbsp;</a>
27 
+        </div>
5 28
6 29 
     </div>
7 30 
 </div>

書き込み プレビュー
読み込み中…
キャンセル
保存