2014年10月24日 星期五

Angularjs Pagination

除了前面所述的無限滾動介面模式,在這裡要分享傳統的分頁模式,雖然infinite scrolling能夠滿足大部分使用情境,但有些網站是不需要那麼即時性的,而且在搜尋時,使用者雖然可以透過輸入關鍵字來查詢,但有些使用者仍希望有索引的方式來查找資訊,試想,當我們在使用google search時,假設在第二頁找到符合需求的資料而下次需要這筆資料時,我們通常已經記憶住它在哪一頁了,而若是分頁設計模式則能完全滿足我們的需求。

 一、首先一樣設計分頁清單這個控件所要做的一些動作,如初始化、點選不同頁時pageChanged等,而這裡搭配bootstrap ui可參考:http://angular-ui.github.io/bootstrap/,的Pagination,而這裡也設計了自訂的filter來實作limitTo的功能,只是與原本不同在於自訂的sliceData這個filter可以指定起始與結束的範圍,這樣一來就能順利搭配分頁的機制來顯示區段資料。

(function(){
    angular.module('paginationModule',['ui.bootstrap'])
        .filter('sliceData',function(){
            return function(input,start,end){
                return input.slice(start,end)
            }
        })
        .directive('listPagination',function(){
            return{
                restrict: 'E',
                scope:{
                    listTitle: '@',
                    datasource: '=',
                    numPerPage: '@'
                },
                transclude: 'true',
                templateUrl: 'listview.html',
                link: function(scope,elem,attrs){
                    scope.divWidth = document.getElementById('myDiv').offsetWidth -60
                    scope.numOfTotalItems = scope.datasource.length
                    scope.initPerPage = 5
                    scope.itemStart = 0
                    scope.itemEnd =  scope.numPerPage
                    scope.$watch('numPerPage',function(newVal){
                        if (newVal) {
                            scope.itemEnd = newVal
                        }
                    })
                    scope.pageChanged = function(){
                        scope.itemStart = (scope.currentPage - 1)*scope.numPerPage
                        scope.itemEnd = scope.currentPage * scope.numPerPage
                    }
                    scope.getNumPerPage = function(){
                        if (!scope.numPerPage) scope.numPerPage = scope.initPerPage
                        return scope.numPerPage
                    }
                }
            }
        })
        .directive('inject',function(){
            return{
                restrict: 'A',
                link: function (scope, element, attrs, ctrl, transcludeFn) {
                    if (!transcludeFn) return;
                    transcludeFn(scope, function (clone) {
                        element.empty();
                        element.append(clone);
                    });
                }
            }
        })
})()

二、設計listview樣板,重點在於這個標籤,是由bootstrap ui所設計的分頁控件,原理一樣,開放出一些設定參數如total-items代表我們總共有多少項目,items-per-page每一頁顯示幾筆,ng-model來binding目前所選的頁數,ng-change可綁定當換頁時的事件,另外尚有一些未使用的參數也可參考官方API: http://angular-ui.github.io/bootstrap/來搭配使用。

<div class="panel panel-info">
    <div class="panel-heading"><h3>{{listTitle}}</h3>

        <div class="list-group-item" align="center" ><span
                class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>Loading...
        </div>
    </div>
    <div id="myDiv">
        <li class="list-group-item" ng-repeat="item in datasource|sliceData:itemStart:itemEnd">
            <div ng-transclude inject></div>
        </li>
    </div>
    <div class="panel-heading" align="center">
        <pagination total-items="numOfTotalItems" items-per-page="getNumPerPage()" ng-model="currentPage"
                    ng-change="pageChanged()"></pagination>
    </div>
</div>

三、接下來就是使用該控件的一些初始化資訊,並準備傳入控件內app.js。

(function(){
    angular.module('appModule',['paginationModule'])
        .controller('appController',function($scope){
            $scope.maxItemsLength = 430
            $scope.numPerPage = 10
            $scope.datasource = []
            $scope.init = function(){
                for (var i = 0;i < $scope.maxItemsLength;i++){
                    $scope.datasource.push({
                        name: 'a',
                        id: i
                    })
                }
            }
            $scope.init()
        })
})()

四、回到index.html,其中使用了該控件,並傳入我們的datasource、title、num-per-page來做設定,並顯示出我們要的內容。

<html ng-app="appModule">

  <head>
    <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//code.angularjs.org/1.3.0/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
    
    <script src="app.js"></script>
    <script src="pagination.js"></script>
  </head>

  <body ng-controller="appController">
    <div style="margin: auto;width: 50%">
        <list-pagination datasource="datasource"
                         num-per-page="{{numPerPage}}"
                         list-title="{{'Pagination Demo'}}">
            <img ng-src="http://placehold.it/{{divWidth}}x50&text={{item.name + item.id}}">
        </list-pagination>
    </div>
</body>

</html>

沒有留言:

張貼留言