基於angularJS的分頁功能

    先看分頁效果圖

    是基於bootstrap的基本分頁效果，樣式能夠先去查看boostrap文檔熟悉。

   在以angularJS中，像這種公共組件通常(也應該)寫到公共directive中，下面能夠下項目中怎麼實現的。

    ①. 公共組件 pageDirective.js 

define(['angular'], function(angular) {                            
　　　　　　　　　　　　　　　　　　　　　　　　　　                     //依賴angularJS，這裏用到了requireJS,未使用者自行更改
    var directives = angular.module("app.directive",[])         //默認ng-app='app';
    directives.directive('pagination',function() {
       return {
           restrict: 'E',
           scope:{
               numPages: '=',
               currentPage: '=',
               pageCalback:"=",
               onSelectPage: '&'
           },
           template:[
               '<ul class="pagination">',
                       '<li class="first" ng-class="{disabled: noPrevious()}">',
                            '<a ng-click="selectFirst()">首頁</a>',
                       '</li>',
                       '<li class="prev" ng-class="{disabled: noPrevious()}">',
               '<a ng-click="selectPrevious()">上一頁</a>',
                       '</li>',
                       '<li ng-style="prestyle">',
                            '<a>...</a>',
                       '</li>',
                       '<li ng-repeat="page in pages" ng-class="{active: isActive(page)}">',
                            '<a ng-click="selectPage(page)">{{page}}</a>',
                       '</li>',
                       '<li ng-style="nexstyle">',
                            '<a>...</a>',
                       '</li>',
                       '<li class="next" ng-class="{disabled: noNext()}">',
               '<a ng-click="selectNext()">下一頁</a>',
                       '</li>',
                       '<li class="last" ng-class="{disabled: noNext()}">',
                            '<a ng-click="selectLast()">尾頁</a>',
                       '</li>',
                   '</ul>',
           ].join(''),
           replace:true,
           link: function(scope) {

               scope.prestyle= {display:"none"};
               scope.nexstyle= {display:"none"};

               scope.$watch('numPages', function(value) {
                   if(value > 10) {
                       scope.nexstyle = {display:"block"};
                       value = 10;
                   } else {
                       scope.nexstyle = {display:"none"};
                   }
                   scope.pages = [];
                   for(var i = 1; i <= value; i++) {
                       scope.pages.push(i);
                   }
               });

               scope.isActive = function(page) {
                   return scope.currentPage === page;
               };

               scope.noPrevious = function() {
                   return scope.currentPage === 1;
               };

               scope.noNext = function() {
                   return scope.currentPage === scope.numPages;
               }

               scope.selectPage = function(page) {

                   if( !scope.isActive(page) ) {

                       //根據當前頁數判斷頁數顯示的邏輯
                       if( page > 10  ) {
                           scope.prestyle = {display:"block"};
                       } else {
                           scope.prestyle = {display:"none"};
                       }
                       //console.log("scope.numPages:---" + scope.numPages);
                       //console.log("page:---" + page);

                       if( (scope.numPages - page) > 5 ) {
                           scope.nexstyle = {display:"block"};
                       } else {
                           scope.nexstyle = {display:"none"};
                           if(page <= 10 && scope.numPages > 10) {
                               scope.nexstyle = {display:"block"};
                           }
                       }
                       if( page > 10 ) {
                           scope.pages = [];
                           if( (scope.numPages - page) > 5 ) {
                               for(var i = (page-5); i < (page + 5); i++) {
                                   scope.pages.push(i);
                               }
                           } else {
                               for(var i = (scope.numPages - 10); i <= scope.numPages ; i++) {
                                   scope.pages.push(i);
                               }
                           }

                       } else {
                           scope.pages = [];
                           for(var i = 1; i <= (10 >= scope.numPages?scope.numPages:10); i++) {
                               scope.pages.push(i);
                           }
                       }


                       scope.currentPage = page;
                       scope.onSelectPage({ page: page });
                   }
               };

               scope.selectFirst = function() {
                   if( !scope.noPrevious() ) {
                       scope.selectPage(1);
                   }
               };

               scope.selectPrevious = function() {
                   if( !scope.noPrevious() ) {
                       scope.selectPage(scope.currentPage - 1);
                   }
               };

               scope.selectNext = function() {
                   if( !scope.noNext() ) {
                       scope.selectPage(scope.currentPage + 1);
                   }
               }


               scope.selectLast = function() {
                   if( !scope.noNext() ) {
                       scope.selectPage(scope.numPages);
                   }
               };

               scope.onSelectPage = function(opts) {
                   var page = opts.page;
                   scope.pageCalback(page);
               }

           }
       }
    })


    return directives;
})

　　開看一下如何使用

在controller中

　　

define(['angular','app'],function(){
　　app.controller('name',['$scope'],function(){
         $scope.searchClick = 0;
    
    
             list(1);

            $scope.pageCallback = function (page) {
                list(page);
            };

        function list(page) {
                if ($scope.searchClick == 0) {
                    $http.post('/服務器端地址/' + page, {'paramsStr': ""})
                        .success(function (result) {
                            if (result && result.code == 200) {
                                $scope.repayments = result.pageList;
                                $scope.page.totalPage = result.totalPage;
                                $scope.page.currentPage = result.currentPage;
                                console.log('獲取頁面數據totalPage'+result.totalPage);
                                console.log('獲取頁面數據currentPage'+result.currentPage);
                            }
                        });
                } else {
                    $http.post('/服務器端地址/' + page, {'paramsStr': JSON.stringify($scope.params)})
                        .success(function (result) {
                            if (result && result.code == 200) {
                                $scope.repayments = result.pageList;
                                $scope.page.totalPage = result.totalPage;
                                $scope.page.currentPage = result.currentPage;
                                console.log('發送頁面數據totalPage'+result.totalPage);
                                console.log('發送頁面數據currentPage'+result.currentPage);
                            }
                        }).error(function (err) {
                        console.log(err);
                    });
                }
            }
　　　　

　　})

})　　            

　　稍微有點亂，解釋下，封裝了一個list方法，list方法是根據客戶端的數據進行顯示頁面和跳轉頁面的，看看咱們得到到的數據格式：

　　

 

   完美，重點就在幾個page開頭的數據上，這個就是頁面顯示和跳轉的核心，表示後臺在維護邏輯。

   若是是用戶查找數據，整個數據表從新解構組合，記得設置$scope.searchClick =1，而後依然list(1);他會走post方法

　看看HTML是怎麼寫的