angularjs自定义指令实现分页插件

由于最近的一个项目使用的是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

        };

    }

])

二、效果

angularjs自定义指令实现分页插件的更多相关文章

AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
angularJS 自定义指令分页
原理和使用说明 1.插件源码主要基于angular directive来实现. 2.调用时关键地方是后台请求处理函数,也就是从后台取数据. 3.插件有两个关键参数currentPage.itemsPe ...
AngularJs自定义指令详解（6） - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
angularJs自定义指令.directive==类似自定义标签
创建自定义的指令除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...
angularJS——自定义指令
主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...

随机推荐

有时在UIWindow上添加遮罩层不成功的原因
程序启动后,初始化window,初始化controller,加载试图,这三个方法的顺序是嵌套的类似于: - (id) initWindow {[self initController];} 而我在i ...
关于SQL语句条件值写中文查不到的问题
在使用jdbc链接MySQL执行SQL语句的时候,sql语句中的where条件,参数值带中文,则查询不到结果,而where条件,参数值都为数字或字母时可以正常查询, 原因是mysql的characte ...
ios UIButton改背景
以下orangeButton.png与orangeButtonHighlight.png分别用于按钮平常状态和被点击时的状态: UIImage *buttonImage = [[UIImage ima ...
Unity快速接入SDK框架
先把工程源码贴出来: 链接:http://pan.baidu.com/s/1geDhtS3 密码:i0s9 最近接android ios的SDK 已经接了10多个有点心得分享一下如果有更好想法求 ...
案例：Standby RAC遭遇ORA-1157,1111,1110导致实例crash处理
案例:Standby RAC遭遇ORA-1157,1111,1110导致实例crash处理环境:RHEL 6.5 + Oracle RAC 11.2.0.4 + Dataguard 今天在实验环境的 ...
sqlite 的基本使用2
sqlite的运算符有好几种,算术运算符,比较运算符,逻辑运算符,位运算符 1,算术运算符算术运算符主要有 + - * . % (取余)这个很简单,举一个例子就行,要达到这样的效果需要格式化行输出 ...
JavaScript版—贪吃蛇小组件
最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...
HTML5中的DOM新特性
元素下的classList属性 classList属性下面有四个方法: add(value): 添加,已存在的属性不添加 remove(value):删除属性 contain(value):检测属性是 ...
【Js应用实例】限制上传图片大小
需求:前端页面开发中,常遇到图片上传的需求,一般要求限制图片格式及大小. 说明:这里就把实现此功能所需代码贴出来,供同志们参考,也方便我以后复用. 要点:1.处理类型type为file的输入元素的v ...
Tomcat7安装及配置教程
Apache Tomcat7.0安装及配置教程.. Apache Tomcat7.0官方网站链接:http://tomcat.apache.org/ apache-tomcat-7.0.73-wi ...

angularjs自定义指令实现分页插件

一、代码部分

1、index.html

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

3、views/home.html

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

5、scripts/app.js

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

7、scripts/controllers/MenuCtrl.js

8、scripts/controllers/HomeCtrl.js

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

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

二、效果

angularjs自定义指令实现分页插件的更多相关文章

随机推荐

热门专题