基於Angularjs實現分頁

前言

       學習任何一門語言前肯定是有業務需求來驅動你去學習它，當然ng也不例外，在學習ng前我第一個想做的demo就是基於ng實現分頁，除去基本的計算思路外就是使用指令封裝成一個插件，在需要分頁的列表頁面內直接引用。

 

插件

      在封裝分頁插件時我實現了幾種方式總體都比較零散，最后找到了一個朋友(http://www.miaoyueyue.com/archives/813.html)封裝的插件，覺還不錯，讀了下他的源碼就直接在項目中使用了。

 

原理和使用說明

      1、插件源碼主要基於angular directive來實現。

      2、調用時關鍵地方是后台請求處理函數，也就是從后台取數據。

      3、插件有兩個關鍵參數currentPage、itemsPerPage，當前頁碼和每頁的記錄數。

      4、實現方法調用后我們需要根據每次點擊分頁插件頁碼時重新提交后台來獲取相應頁碼數據。 在調用的頁碼中我使用了$watch來監控。  我初次使用時是把調用函數放在了插件的onchange中，結果發現每次都會觸發兩次后台。這個地方需要注意。

      5、我把請求后台封裝成了Service層，然后在Controller里調用，也符合MVC思想。

 

效果圖

 

調用代碼

<div ng-app="DemoApp" ng-controller="DemoController">
    <table class="table table-striped">
        <thead>
            <tr>
                <td>ID</td>
                <td>FirstName</td>
                <td>LastName</td>
                <td>Status</td>
                <td>Address</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="emp in persons">
                <td>{{emp.ID}}</td>
                <td>{{emp.FirstName}}</td>
                <td>{{emp.LastName}}</td>
                <td>{{emp.Status}}</td>
                <td>{{emp.Address}}</td>
            </tr>
        </tbody>
    </table>
    <tm-pagination conf="paginationConf"></tm-pagination>
</div>
<script type="text/javascript">
    var app = angular.module('DemoApp', ['tm.pagination']);

    app.controller('DemoController', ['$scope', 'BusinessService', function ($scope, BusinessService) {

        var GetAllEmployee = function () {

            var postData = {
                pageIndex: $scope.paginationConf.currentPage,
                pageSize: $scope.paginationConf.itemsPerPage
            }

            BusinessService.list(postData).success(function (response) {
                $scope.paginationConf.totalItems = response.count;
                $scope.persons = response.items;
            });

        }

        //配置分頁基本參數
        $scope.paginationConf = {
            currentPage: 1,
            itemsPerPage: 5
        };

        /***************************************************************
        當頁碼和頁面記錄數發生變化時監控后台查詢
        如果把currentPage和itemsPerPage分開監控的話則會觸發兩次后台事件。 
        ***************************************************************/
        $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
    }]);


    //業務類
    app.factory('BusinessService', ['$http', function ($http) {
        var list = function (postData) {
            return $http.post('/Employee/GetAllEmployee', postData);
        }

        return {
            list: function (postData) {
                return list(postData);
            }
        }
    }]);
</script>

 

插件和Demo下載

http://yunpan.cn/cQEhnLrpnkniQ  訪問密碼 be74