完成了搜索分页显示

database/db.js

@@ -269,8 +269,6 @@ db.getBookmarksTable = function(user_id) {
 }
 
 db.getBookmarksSearch = function(params) {
-    var search_word = params.searchWord || 'test';
-    var user_id = '1';
     var sql = "SELECT id, user_id, title, description, url, public, click_count, DATE_FORMAT(created_at, '%Y-%m-%d') as created_at,  DATE_FORMAT(last_click, '%Y-%m-%d') as last_click FROM `bookmarks` WHERE 1=1";
 
     if (params.dateCreate) {
@@ -305,17 +303,33 @@ db.getBookmarksSearch = function(params) {
             sql += " AND `user_id` IN (SELECT `id` FROM `users` WHERE `username` LIKE '%" + params.username + "%' )"
         }
     }
-    sql += " ORDER BY click_count DESC, created_at DESC LIMIT 0, 50";
+
+    params.currentPage = params.currentPage || 1;
+    params.currentPageItems = params.currentPageItems || 20;
+    sql += " ORDER BY click_count DESC, created_at DESC";
     console.log(sql);
     return new Promise(function(resolve, reject) {
         client.query(sql, (err, result) => {
             if (err) {
                 reject(err);
             } else {
-                resolve(result);
+
+                sql += " LIMIT " + (params.currentPage - 1) * params.currentPageItems + ", " + params.currentPageItems;
+                var totalItems = result.length;
+                client.query(sql, (err, result) => {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        var searchData = {
+                            totalItems: totalItems,
+                            bookmarks: result,
+                        }
+                        resolve(searchData);
+                    }
+                });
             }
         });
-    });
+    })
 }
 
 db.getBookmarksCard = function(user_id) {

public/index.html

@@ -32,6 +32,7 @@
         <script src="/scripts/services/bookmark-service.js"></script>
         <script src="/scripts/services/data-service.js"></script>
         <script src="/scripts/services/pub-sub-service.js"></script>
+        <script src="/scripts/directives/pagination-directive.js"></script>
         <script src="/scripts/directives/edit-directive.js"></script>
         <script src="/scripts/directives/menus-directive.js"></script>
         <script src="/scripts/directives/element-render-finish-directive.js"></script>

public/scripts/controllers/bookmarks-controller.js

@@ -6,6 +6,18 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
     $scope.bookmarkEditHover = false;
     $scope.showStyle = 'navigate'; // 显示风格'navigate', 'card', 'table'
     $scope.edit = false;
+    $scope.totalPages = 0;
+    $scope.currentPage = 1;
+    $scope.inputPage = '';
+    $scope.changeCurrentPage = function(currentPage) {
+        currentPage = parseInt(currentPage) || 0;
+        console.log(currentPage);
+        if (currentPage <= $scope.totalPages && currentPage >= 1) {
+            $scope.currentPage = currentPage;
+            $scope.inputPage = '';
+        }
+    }
+
     var params = {
         showStyle: $scope.showStyle,
     }
@@ -67,6 +79,8 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
         bookmarkService.getBookmarks(params)
             .then((data) => {
                 $scope.bookmarks = data;
+                $scope.totalPages = parseInt(Math.random() * 1000);
+                $scope.currentPage = (parseInt(Math.random() * 1000) % $scope.totalPages) + 1;
                 pubSubService.publish('Common.menuActive', {
                     login: true,
                     index: 0
@@ -77,31 +91,6 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
 
     $scope.$on('viewContentLoaded', function(elementRenderFinishedEvent) {
         $('.ui.dropdown').dropdown();
-        $('.ui.calendar.js-date-begin').calendar({
-            type: 'date',
-            formatter: {
-                date: function(date, settings) {
-                    if (!date) return '';
-                    var day = date.getDate();
-                    var month = date.getMonth() + 1;
-                    var year = date.getFullYear();
-                    return year + '/' + month + '/' + day;
-                }
-            },
-            endCalendar: $('.ui.calendar.js-date-end')
-        });
-        $('.ui.calendar.js-date-end').calendar({
-            type: 'date',
-            formatter: {
-                date: function(date, settings) {
-                    if (!date) return '';
-                    var day = date.getDate();
-                    var month = date.getMonth() + 1;
-                    var year = date.getFullYear();
-                    return year + '/' + month + '/' + day;
-                }
-            },
-            startCalendar: $('.ui.calendar.js-date-begin')
-        });
     });
+
 }]);

public/scripts/controllers/search-controller.js

@@ -1,5 +1,6 @@
 app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$window', '$timeout', 'bookmarkService', 'pubSubService', function($scope, $state, $stateParams, $filter, $window, $timeout, bookmarkService, pubSubService) {
     console.log("Hello searchCtr...", $stateParams);
+    const currentPageItems = 20;
     $scope.bookmarks = []; // 书签数据
     $scope.showSearch = false; //
     $scope.showTags = false; //
@@ -13,6 +14,18 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
     $scope.userRange = '';
     $scope.bookmarkCount = 0;
     $scope.tags = []
+    $scope.totalPages = 0;
+    $scope.currentPage = 1;
+    $scope.inputPage = '';
+    $scope.changeCurrentPage = function(currentPage) {
+        currentPage = parseInt(currentPage) || 0;
+        console.log(currentPage);
+        if (currentPage <= $scope.totalPages && currentPage >= 1) {
+            $scope.currentPage = currentPage;
+            $scope.inputPage = '';
+            $scope.search();
+        }
+    }
 
     bookmarkService.getTags({
             user_id: '1',
@@ -24,6 +37,8 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
 
     var searchParams = {
         searchWord: $scope.searchWord,
+        currentPage: 1,
+        currentPageItems: currentPageItems,
     }
     if ($scope.searchWord) {
         searchBookmarks(searchParams);
@@ -86,7 +101,8 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
             params.dateClickBegin = $scope.dateClickBegin;
             params.dateClickEnd = $scope.dateClickEnd;
         }
-
+        params.currentPage = $scope.currentPage;
+        params.currentPageItems = currentPageItems;
         searchBookmarks(params)
         console.log('search..', params)
     }
@@ -117,8 +133,10 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
     function searchBookmarks(params) {
         bookmarkService.searchBookmarks(params)
             .then((data) => {
-                $scope.bookmarks = data;
-                $scope.bookmarkCount = data.length;
+                $scope.bookmarks = data.bookmarks;
+                $scope.bookmarkCount = data.totalItems;
+                $scope.totalPages = Math.ceil($scope.bookmarkCount / currentPageItems);
+
                 pubSubService.publish('Common.menuActive', {
                     login: true,
                     index: 0

public/scripts/directives/pagination-directive.js

@@ -0,0 +1,12 @@
+// 不要使用已有的html作为指令，如menu，否则angular会陷入死循环
+app.directive('pagination', function() {
+    return {
+        restrict: 'EA',
+        templateUrl: '/views/pagination.html',
+        replace: true,
+        // scope: {
+        //     conf: '='
+        // },
+        link: function(scope, element, attrs) {}
+    }
+});

public/views/bookmarks.html

@@ -28,20 +28,6 @@
         </div>
         <div class="ui divider"></div>
     </div>
-    <div style="height:45px;">
-        <div class="ui right floated pagination menu">
-            <a class="icon item">
-                <i class="left chevron icon"></i>
-            </a>
-            <a class="item">1</a>
-            <a class="item">2</a>
-            <a class="item">3</a>
-            <a class="item">4</a>
-            <a class="icon item">
-                <i class="right chevron icon"></i>
-            </a>
-        </div>
-    </div>
 </div>
 <table class="ui celled table" ng-if="showStyle === 'table'">
     <thead>
@@ -84,18 +70,7 @@
     <tfoot>
         <tr>
             <th colspan="7">
-                <div class="ui right floated pagination menu">
-                    <a class="icon item">
-                        <i class="left chevron icon"></i>
-                    </a>
-                    <a class="item">1</a>
-                    <a class="item">2</a>
-                    <a class="item">3</a>
-                    <a class="item">4</a>
-                    <a class="icon item">
-                        <i class="right chevron icon"></i>
-                    </a>
-                </div>
+                <pagination></pagination>
             </th>
         </tr>
     </tfoot>

public/views/pagination.html

@@ -0,0 +1,29 @@
+<div class="ui right floated pagination menu" ng-if="totalPages>0">
+    <a class="icon item" ng-click="changeCurrentPage(1)">
+        <i class="angle double left icon"></i>
+    </a>
+    <a class="icon item" ng-click="changeCurrentPage(currentPage-1)">
+        <i class="angle left icon"></i>
+    </a>
+    <a class="item" ng-if="currentPage > 1" ng-click="changeCurrentPage(1)">1</a>
+    <a class="item" ng-if="currentPage-3>2">.....</a>
+    <a class="item" ng-if="currentPage-3>1" ng-click="changeCurrentPage(currentPage-3)">{{currentPage-3}}</a>
+    <a class="item" ng-if="currentPage-2>1" ng-click="changeCurrentPage(currentPage-2)">{{currentPage-2}}</a>
+    <a class="item" ng-if="currentPage-1>1" ng-click="changeCurrentPage(currentPage-1)">{{currentPage-1}}</a>
+    <a class="item active">{{ currentPage }}</a>
+    <a class="item" ng-if="currentPage+1<totalPages" ng-click="changeCurrentPage(currentPage+1)">{{currentPage+1}}</a>
+    <a class="item" ng-if="currentPage+2<totalPages" ng-click="changeCurrentPage(currentPage+2)">{{currentPage+2}}</a>
+    <a class="item" ng-if="currentPage+3<totalPages" ng-click="changeCurrentPage(currentPage+3)">{{currentPage+3}}</a>
+    <a class="item" ng-if="currentPage+3<totalPages-1">.....</a>
+    <a class="item" ng-if="currentPage < totalPages" ng-click="changeCurrentPage(totalPages)">{{totalPages}}</a>
+    <a class="icon item" ng-click="changeCurrentPage(currentPage+1)">
+        <i class="angle right icon"></i>
+    </a>
+    <a class="icon item" ng-click="changeCurrentPage(totalPages)">
+        <i class="angle double right icon"></i>
+    </a>
+    <div class="ui transparent input item" style="width:100px;">
+        <input type="text" placeholder="跳转至..." ng-model="inputPage">
+        <i class="arrow right icon" ng-click="changeCurrentPage(inputPage)"></i>
+    </div>
+</div>

public/views/search.html

@@ -154,18 +154,7 @@
     <tfoot>
         <tr>
             <th colspan="7">
-                <div class="ui right floated pagination menu">
-                    <a class="icon item">
-                        <i class="left chevron icon"></i>
-                    </a>
-                    <a class="item">1</a>
-                    <a class="item">2</a>
-                    <a class="item">3</a>
-                    <a class="item">4</a>
-                    <a class="icon item">
-                        <i class="right chevron icon"></i>
-                    </a>
-                </div>
+                <pagination></pagination>
             </th>
         </tr>
     </tfoot>

routes/api.js

@@ -220,9 +220,11 @@ api.get('/searchBookmarks', function(req, res) {
     var bookmarks = [];
     var tagsBookmarks = [];
     var userId = '1';
+    var totalItems = 0;
     db.getBookmarksSearch(params)
-        .then((bms) => {
-            bookmarks = bms;
+        .then((searchData) => {
+            totalItems = searchData.totalItems;
+            bookmarks = searchData.bookmarks;
             if (bookmarks.length > 0) {
                 var bookmarkIds = bookmarks.map((bookmark) => bookmark.id);
                 return db.getTagsBookmarks(bookmarkIds);
@@ -236,6 +238,10 @@ api.get('/searchBookmarks', function(req, res) {
             return db.getTags(userId);
         })
         .then((tags) => {
+            var sendData = {
+                totalItems: totalItems,
+                bookmarks: []
+            }
             var data = [];
             // 获取每个书签的所有分类标签
             bookmarks.forEach(function(bookmark) {
@@ -252,7 +258,8 @@ api.get('/searchBookmarks', function(req, res) {
                 bookmark.tags = bookmarkTags;
                 data.push(bookmark);
             })
-            res.json(data);
+            sendData.bookmarks = data;
+            res.json(sendData);
         })
         .catch((err) => console.log('bookmarks table or card err', err))
 });