基於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是怎麼寫的

　　

　　

　　

基於angularJS的分頁功能