angularjs自定義指令實現分頁插件

本文轉載自查看原文 2017-09-16 12:47 1237 web前端/ JavaScript/ 插件/ AnguarJS

由於最近的一個項目使用的是angularjs1.0的版本，涉及到分頁查詢數據的功能，后來自己就用自定義指令實現了該功能。現在單獨做了個簡易的小demo，主要是為了分享自己寫的分頁功能。注：本實例調用的是真實接口數據，因此會在代碼中，隱藏接口地址。

首先、小demo的目錄結構如下：

一、代碼部分

下面直接把每一個文件的代碼貼出來，重點是ListCtrl.js和pageDirective.js：

1、index.html

<!DOCTYPE html>
<html lang="en" ng-app="app" ng-cloak>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="lib/jquery.js"></script>-->
    <script src="lib/angular.js"></script>
    <script src="lib/angular-ui-router.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .left-menu {
            width: 200px;
            float: left;
            height: 100%;
        }
        .left-menu ul {
            list-style: none;
        }
        .left-menu ul li {
            height: 40px;
            line-height: 40px;
            background-color: #777;
            color: #ddd;
            margin-bottom: 5px;
            cursor: pointer;
        }
        .main {
            margin-left: 200px;
            padding: 10px;
        }
        .left-menu ul li.active {
            background-color: #333;
            color: #fff;
        }
    </style>
</head>
<body>
    <div style="width: 100%;height: 50px;background-color: #ddd;">頂部區域</div>
    <div class="left-menu" ng-controller="MenuCtrl">
        <ul>
            <li ng-click="goState('home')" ng-class="{active:curUrl == '/home'}">首頁</li>
            <li ng-click="goState('list')" ng-class="{active:curUrl == '/list'}">列表</li>
        </ul>
    </div>

    <div class="main" ui-view="main"></div>

<script src="scripts/app.js"></script>
<script src="scripts/router.js"></script>
<script src="scripts/controllers/MenuCtrl.js"></script>
<script src="scripts/controllers/ListCtrl.js"></script>
<script src="scripts/controllers/HomeCtrl.js"></script>
<script src="scripts/directive/pageDirective.js"></script>
</body>
</html>

2、views/list.html （重要，列表數據的html部分）

<style>
    table {
        border: 1px solid #000;
        border-collapse: collapse;
        width: 100%;
    }
    table th,table td {
        border: 1px solid #000;
        text-align: center;
        height: 30px;
    }
</style>

<table>
    <thead>
    <th>ID</th>
    <th>昵稱</th>
    <th>創建時間</th>
    </thead>
    <tbody>
    <tr ng-repeat="item in listData">
        <td>{{item.id}}</td>
        <td>{{item.nickname}}</td>
        <td>{{item.create_time}}</td>
    </tr>
    </tbody>
</table>
<div>
    <!--分頁指令-->
    <div page-directive page-config="pageConfig"></div>
</div>

3、views/home.html

<div>首頁區域</div>
<a ng-href="{{url}}" target="_self">百度</a>

4、views/directive/page-directive.html （重要，自定義指令的html部分）

<style>
    .page {font-size: 14px;background-color: transparent;}
    .page .page-l select {width: 60px;height: 30px;}
    .page .page-r {float: right;padding-top: 10px;}
    .page .page-r ul {float: left;list-style: none;margin: 0;height: 30px;box-sizing: border-box;}
    .page .page-r ul li {float: left;list-style: none;height: 100%;line-height: 30px;border: 1px solid #ccc;border-right: 0 none;box-sizing: border-box;}
    .page .page-r ul li:hover {background-color: #e2e2e2;}
    .page .page-r ul li:last-child {border-right: 1px solid #ccc;}
    .page .page-r ul li a {text-decoration: none;display: block;height: 100%;padding:0 10px; color: #2A6496;}
    .page .page-r ul li a.active {background-color: #428BCA;color: #fff;}
    .page .page-r ul li span {display: block;height: 100%;padding:0 10px; color: #2A6496;cursor: pointer;}
    .page .page-r ul li span.ellipsis {cursor: default;}
</style>
<div class="page" style="width: 100%;height: 50px;line-height: 50px;">
    <div class="page-l" id="page_l" style="float: left;">
        <span>總共 <span id="total_count">{{pageConfig.totalCount}}</span> 條</span>
        <div style="display: inline-block;margin-left: 20px;">
            <span>每頁顯示</span>
            <select id="page_size">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>條
        </div>
    </div>
    <div class="page-r">
        <ul id="page_ul" class="page-ul"></ul>
    </div>
</div>

5、scripts/app.js

angular.module('app', ['ui.router', 'app.C', 'app.S', 'app.D'])
.constant('global',{    //定義全局變量
    url:'http://www.baidu.com'
});

angular.module('app.C', []);
angular.module('app.S', []);
angular.module('app.D', []);

6、scripts/router.js （路由配置）

var app = angular.module('app').config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');  //如果沒有匹配到，則就讓其匹配home
        $stateProvider
            .state('home',{
                url:'/home',
                views:{
                    'main':{
                        templateUrl:'views/home.html',
                        controller:'HomeCtrl'
                    }
                }
            })
            .state('list',{
                url:'/list',
                views:{
                    'main':{
                        templateUrl:'views/list.html',
                        controller:'ListCtrl'
                    }
                }
            })
    }
]).run(['$rootScope', '$state',
    function ($rootScope, $state) {
        $rootScope.$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams) {
                console.log($state.current.url);
                $rootScope.curUrl = $state.current.url;
            })
    }
])

7、scripts/controllers/MenuCtrl.js

angular.module('app.C').controller('MenuCtrl', ['$scope', '$state',
    function ($scope, $state) {
        $scope.goState = function (url,params) {
            if(!url) {
                $state.go('home')
            }else{
                if(params){
                    $state.go(url,params)
                }else{
                    $state.go(url)
                }
            }
        }
    }
])

8、scripts/controllers/HomeCtrl.js

angular.module('app.C').controller('HomeCtrl',['$scope', 'global',
    function ($scope, global) {
        $scope.url = global.url;    //全局變量
    }
])

9、scripts/controllers/ListCtrl.js （重要部分，列表數據的controller部分）

angular.module('app.C').controller('ListCtrl', ['$scope', '$http',
    function ($scope, $http) {

        //初始化數據
        //分頁參數（參數名固定不可變）
        $scope.pageConfig = {
            // pageSize:10,    //每頁條數（不設置時，默認為10）
            pageIndex:1,    //當前頁碼
            totalCount:0,   //總記錄數
            totalPage:0,     //總頁碼
            prevPage:'< 上一頁',     //上一頁（不設置時，默認為：<）
            nextPage:'下一頁 >',     //下一頁（不設置時，默認為：>）
            firstPage:'<< 首頁',     //首頁（不設置時，默認為：<<）
            lastPage:'末頁 >>',     //末頁（不設置時，默認為：>>）
            degeCount:3,             //當前頁前后兩邊可顯示的頁碼個數（不設置時，默認為3）
            isShowEllipsis:true    //是否顯示省略號不可點擊按鈕（true：顯示，false：不顯示）
        }
        $scope.listData = [];   //列表數據

        //請求接口的參數（參數名根據接口文檔確定）
        $scope.params = {
            page: $scope.pageConfig.pageIndex,  //當前頁碼
            pageSize: $scope.pageConfig.pageSize,   //每頁條數
            course_id: 537
        }
        $scope.getList = function () {
            var promise = $http({
                method:"post",
                url:"http://*******",　　//此處隱藏接口地址
                params:$scope.params,
                headers:{Authorization:'****'},　　//此處隱藏請求頭信息
            }).success(function(res){
                if(res.success){
                    $scope.listData = res.data.list;
                    $scope.pageConfig.totalCount = res.data.totalCount; //總記錄數
                    $scope.pageConfig.totalPage = Math.ceil($scope.pageConfig.totalCount / $scope.pageConfig.pageSize); //總頁數
                    console.log('總記錄數：'+$scope.pageConfig.totalCount+'； 總頁數：'+$scope.pageConfig.totalPage+'；當前頁碼：'+$scope.pageConfig.pageIndex);
                    $scope.$broadcast("initPage")   //調用分頁組件里的初始化頁碼函數
                }else{
                    alert('系統錯誤');
                }
            }).error(function(data){
                alert('系統錯誤');
            })
        }
        $scope.getList()


        //監聽分頁組件中的分頁點擊事件
        $scope.$on("clickPage", function(e, m) {
            $scope.params.page = $scope.pageConfig.pageIndex;
            $scope.params.pageSize = $scope.pageConfig.pageSize;
            console.log('pageSize='+$scope.params.pageSize);
            $scope.getList();
        })
    }
])

10、scripts/directive/pageDirective.js （重要部分，自定義指令的js部分）

angular.module('app.D').directive('pageDirective',['$rootScope',
    function ($rootScope) {
        var link = function (scope,elem,attr) {
            scope.pageConfig.pageIndex;  //當前頁碼
            scope.pageConfig.totalPage;  //總頁數
            scope.pageConfig.totalCount; //總記錄數
            scope.pageConfig.pageSize = scope.pageConfig.pageSize || 10;  //每頁條數
            var prev = scope.pageConfig.prevPage || '<';  //上一頁文字
            var next = scope.pageConfig.nextPage || '>';  //下一頁文字
            var first = scope.pageConfig.firstPage || '<<';  //首頁文字
            var last = scope.pageConfig.lastPage || '>>';  //末頁文字
            var degeCount = scope.pageConfig.degeCount || 3;  //當前頁碼兩邊的頁碼個數（默認：3）
            var isShowEllipsis = scope.pageConfig.isShowEllipsis;   //是否顯示省略號不可點擊按鈕
            var ellipsisBtn = isShowEllipsis ? '<li><span class="ellipsis">...</span></li>' : '';


            //監聽父作用域列表數據獲取成功后
            scope.$on("initPage", function(e, m) {
                initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
            });

            function initPage(totalPage, pageIndex, degeCount) {
                var pageHtml = '';
                var tmpHtmlPrev = '';
                var tmpHtmlNext = '';
                if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex >= degeCount+1){   //前后都需要
                    var count = degeCount;  //前后各自需要顯示的頁碼個數
                    for(var i=0; i<count; i++){
                        if(pageIndex != 1){
                            tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
                        }
                        tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
                    }
                    pageHtml = '<li><a id="first_page" href="javascript:;">'+first+'</a></li>'+
                        '<li><a id="prev_page" href="javascript:;">'+prev+'</a></li>'+((pageIndex>degeCount+1) ? ellipsisBtn : '' )+
                        tmpHtmlPrev +
                        '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                        tmpHtmlNext +
                        ellipsisBtn+
                        '<li><a id="next_page" href="javascript:;">'+next+'</a></li>'+
                        '<li><a id="last_page" href="javascript:;">'+last+'</a></li>';
                }else if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex < degeCount+1) { //前需要，后不需要
                    var count = degeCount;  //前需要顯示的頁碼個數
                    var countNext = totalPage - pageIndex;  //后需要顯示的頁碼個數
                    if(pageIndex != 1){
                        for(var i=0; i<count; i++){
                            tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
                        }
                    }
                    for(var i=0; i<countNext; i++){
                        tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
                    }
                    pageHtml =  '<li><a id="first_page" href="javascript:;">'+first+'</a></li>'+
                        '<li><a id="prev_page" href="javascript:;">'+prev+'</a></li>'+((pageIndex>degeCount+1) ? ellipsisBtn : '' )+
                        tmpHtmlPrev +
                        '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                        tmpHtmlNext +
                        '<li><a id="next_page" href="javascript:;">'+next+'</a></li>'+
                        '<li><a id="last_page" href="javascript:;">'+last+'</a></li>';
                }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前不需要，后需要
                    var countPrev = pageIndex - 1;  //前需要顯示的頁碼個數
                    var count = degeCount;  //后需要顯示的頁碼個數
                    if(pageIndex != 1){
                        for(var i=0; i<countPrev; i++){
                            tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
                        }
                    }
                    for(var i=0; i<count; i++){
                        tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
                    }
                    pageHtml =  '<li><a id="first_page" href="javascript:;">'+first+'</a></li>'+
                        '<li><a id="prev_page" href="javascript:;">'+prev+'</a></li>'+
                        tmpHtmlPrev +
                        '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                        tmpHtmlNext +
                        ellipsisBtn+
                        '<li><a id="next_page" href="javascript:;">'+next+'</a></li>'+
                        '<li><a id="last_page" href="javascript:;">'+last+'</a></li>';
                }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex < degeCount+1){   //前后都不需要
                    var countPrev = pageIndex - 1;  //前需要顯示的頁碼個數
                    var countNext = totalPage - pageIndex;  //后需要顯示的頁碼個數
                    if(pageIndex != 1){
                        for(var i=0; i<countPrev; i++){
                            tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
                        }
                    }
                    for(var i=0; i<countNext; i++){
                        tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
                    }
                    pageHtml =  '<li><a id="first_page" href="javascript:;">'+first+'</a></li>'+
                        '<li><a id="prev_page" href="javascript:;">'+prev+'</a></li>'+
                        tmpHtmlPrev +
                        '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                        tmpHtmlNext +
                        '<li><a id="next_page" href="javascript:;">'+next+'</a></li>'+
                        '<li><a id="last_page" href="javascript:;">'+last+'</a></li>';
                }
                document.getElementById('page_ul').innerHTML = pageHtml;
            }

            /*點擊頁碼（首頁、上一頁、下一頁、末頁）*/
            document.getElementById('page_ul').addEventListener('click', function (e) {
                console.log(456);
                var _this = e.target;   //當前被點擊的a標簽
                var idAttr = _this.id;  //id屬性
                var className = _this.className;    //class屬性
                if(idAttr == 'first_page'){ //如果是點擊的首頁
                    scope.pageConfig.pageIndex = 1;
                }else if(idAttr == 'prev_page'){    //如果點擊的是上一頁
                    scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == 1 ? scope.pageConfig.pageIndex : scope.pageConfig.pageIndex - 1 ;
                }else if(idAttr == 'next_page'){ //如果點擊的是下一頁
                    scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == scope.pageConfig.totalPage ? scope.pageConfig.pageIndex : parseInt(scope.pageConfig.pageIndex) + 1;
                }else if(idAttr == 'last_page'){ //如果點擊的是末頁
                    scope.pageConfig.pageIndex = scope.pageConfig.totalPage;
                }else if(className == 'page-number'){   //如果點擊的是數字頁碼
                    scope.pageConfig.pageIndex = _this.innerText;
                }
                initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount);
                scope.$emit('clickPage');
            });
            /*改變每頁條數*/
            document.getElementById('page_size').addEventListener('change', function () {
                var _this = this;
                scope.pageConfig.pageIndex = 1;
                scope.pageConfig.pageSize = _this.value - 0;
                initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount);
                scope.$emit('clickPage');
            })

            /////////////////////////// 以下注釋部分是用jQuery寫的點擊頁碼部分 /////////////////////////////

            /*點擊數字頁*/
            // $('#page_ul').on('click','a',function () {
            //     var _this = $(this);
            //     scope.pageConfig.pageIndex = _this.text();
            //     initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
            //     scope.$emit('clickPage')
            // });
            /*點擊首頁*/
            // $('#page_ul').on('click','#first_page',function () {
            //     var _this = $(this);
            //     scope.pageConfig.pageIndex = 1;
            //     initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
            //     scope.$emit('clickPage')
            // });
            // /*點擊上一頁*/
            // $('#page_ul').on('click','#prev_page',function () {
            //     var _this = $(this);
            //     scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == 1 ? scope.pageConfig.pageIndex : scope.pageConfig.pageIndex - 1 ;
            //     initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
            //     scope.$emit('clickPage')
            // });
            // /*點擊下一頁*/
            // $('#page_ul').on('click','#next_page',function () {
            //     var _this = $(this);
            //     scope.pageConfig.pageIndex = scope.pageConfig.pageIndex == scope.pageConfig.totalPage ? scope.pageConfig.pageIndex : parseInt(scope.pageConfig.pageIndex) + 1;
            //     initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
            //     scope.$emit('clickPage')
            // });
            // /*點擊尾頁*/
            // $('#page_ul').on('click','#last_page',function () {
            //     var _this = $(this);
            //     scope.pageConfig.pageIndex = scope.pageConfig.totalPage;
            //     initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
            //     scope.$emit('clickPage')
            // });
            /*改變每頁條數*/
            // $('.page-l').on('change', '#page_size',function () {
            //     var _this = $(this);
            //     scope.pageConfig.pageIndex = 1;
            //     scope.pageConfig.pageSize = _this.val()-0;
            //     initPage(scope.pageConfig.totalPage, scope.pageConfig.pageIndex, degeCount)
            //     scope.$emit('clickPage')
            // });
        };

        return {
            restrict: 'EA',
            'scope':{
                'pageConfig':'=',
            },
            templateUrl: 'views/directive/page-directive.html',
            link: link
        };
    }
])

二、效果

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 angularJS 自定義指令分頁【AngularJS】—— 8 自定義指令 AngularJS - 自定義指令 AngularJS -- 指令(創建自定義指令) AngularJS--自定義指令和模板 AngularJS學習筆記（五）自定義指令（1）走進AngularJs(三)自定義指令-----（上） angularjs 自定義指令彈窗 AngularJs自定義指令詳解（5） - link AngularJS使用directive自定義指令