angular 分頁插件

時間 2019-11-14

原文原文鏈接

這兩天就要要到分頁插件了，在家恰好邊學習，邊把分頁插件寫了javascript

好了，開始講解demojava

html中關鍵的一句就是這個了 <div page-link conf="pagedata"></div>git

繼續看js中的

  $scope.pagedata={ url:"aaa.json", pageSize:10, currentPage:1, returnValue:[], }
這個就是conf的值
經過directive的scope的進行相互綁定

在directive中有進行http請求，具體的請求寫法，以及參數的配置要根據實際項目而定。
這裏是直接請求json返回數據的。

返回值放在

$scope.pagedata.returnValue中的
能夠取到這個值[1,3,3]

{
  "data": {
    "page": {
      "page_total": 100,
      "page_current": 10
    },
    "list": [1, 3, 3]
  }
}

<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <script src="angular.min.js"></script>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .current{
            color:red;
        }
    </style>
</head>
<body>
<div ng-controller="myCtrl">
<div page-link  conf="pagedata"></div>
</div>
<script src="pagination.js"></script>
</body>
</html>

angular.module('app',[]).controller('myCtrl',function($scope){
    $scope.pagedata={
        url:"aaa.json",
        pageSize:10,
        currentPage:1,
        returnValue:[],
    }
}).directive('pageLink',function($http){
    return {
        restrict: 'EAMC',
        replace: false,
        transclude: true,
        scope:{
            conf:'=conf'
        },
        template:
        '<ul class="paging">' +
        '<span class="pagetotal">共<span ng-bind="dataPageCount"></span>條</span>' +
        '<li ng-if="hasLastPage"><a ng-click="changePage($event,1)"><<</a></li>' +
        '<li ng-if="hasLastPage"><a ng-click="changePage($event,dataPageNo-1)"><</a></li>' +
        '<li ng-repeat="pageNumber in pageNumberList" ng-class="{ \'current\':  pageNumber === dataPageNo }"><a ng-click="changePage($event,pageNumber)" ng-bind="pageNumber"></a></li>' +
        '<li ng-if="hasNextPage"><a ng-click="changePage($event,dataPageNo+1)">></a></li>' +
        '<li ng-if="hasNextPage"><a ng-click="changePage($event, dataPageCount)">>></a></li>' +
        '<input type="text" ng-model="pageInputNo" />' +
        '<button ng-click="pageInputNo <= dataPageCount && changePage($event,pageInputNo)">GO</button>' +
        '</ul>',
        link: function (scope, element) {
            scope.dataUrl = scope.conf.url;
            scope.dataStartPage = scope.conf.currentPage || 1;
            scope.dataPageNo = scope.currentPage || 1;
            scope.pageNumberListLength = 5;
            scope.hasLastPage = false;
            scope.hasNextPage = false;
            //總頁數
            scope.dataPageCount = 0;
            scope.pageNumberList = [];
            scope.dataPer = scope.page_size || 10;

            //改變頁碼
            scope.changePage = function (e, page, p) {
                scope.dataStartPage = page;
                scope.pageData ='page_size=' + scope.dataPer + '&page_no='+ page;
                $http({//請求我的中心-信息詳情接口
                    url: scope.dataUrl,
                    data:scope.pageData,
                    method: 'POST',
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                }).success(function(res){
                    scope.conf.returnValue=res.data.list;
                    if (res.data.page) {
                        scope.dataPageCount = parseInt(res.data.page.page_total);
                        scope.dataPageNo = page;
                    }
                    // 總頁數爲0時
                    if (scope.dataPageCount === 0) {
                        scope.hasNextPage = false;
                        scope.pageNumberList = [];
                        // 總頁數小於等於最大顯示頁數時
                    } else if (scope.dataPageCount <= scope.pageNumberListLength) {
                        scope.hasLastPage = false;
                        scope.hasNextPage = false;
                        scope.pageNumberList = []
                        for (var i = 0; i < scope.dataPageCount; i++) {
                            scope.pageNumberList.push(i + 1)
                        }
                        // 是否還有上一頁
                        if (scope.dataPageNo > 1) {
                            scope.hasLastPage = true;
                        } else {
                            scope.hasLastPage = false;
                        }
                        // 是否還有下一頁
                        if (scope.dataPageNo < scope.dataPageCount) {
                            scope.hasNextPage = true;
                        } else {
                            scope.hasNextPage = false;
                        }
                        // 總頁數大於最大顯示頁數時
                    } else if (scope.dataPageCount > scope.pageNumberListLength) {
                        // 頁數小於
                        var pageNumberListLengthHalf = Math.ceil(scope.pageNumberListLength / 2);
                        scope.pageNumberList = [];
                        if (scope.dataPageNo <= pageNumberListLengthHalf) {
                            for (var i = 0; i < scope.pageNumberListLength; i++) {
                                scope.pageNumberList.push(i + 1);
                            }
                        } else if (scope.dataPageNo > scope.dataPageCount - pageNumberListLengthHalf) {
                            for (var i = scope.dataPageCount - scope.pageNumberListLength; i < scope.dataPageCount; i++) {
                                scope.pageNumberList.push(i + 1);
                            }
                        } else {
                            for (var i = scope.dataPageNo - pageNumberListLengthHalf; i < scope.dataPageNo + pageNumberListLengthHalf - 1; i++) {
                                scope.pageNumberList.push(i + 1);
                            }
                        }
                        // 是否還有上一頁
                        if (scope.dataPageNo > 1) {
                            scope.hasLastPage = true;
                        } else {
                            scope.hasLastPage = false;
                        }
                        // 是否還有下一頁
                        if (scope.dataPageNo < scope.dataPageCount) {
                            scope.hasNextPage = true;
                        } else {
                            scope.hasNextPage = false;
                        }
                    }
                })
            };
            scope.changePage(null, scope.dataStartPage);
        }
    }
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。