Angular分页指令, 简单配置即可使用

Magicer 发布于2019-08-20 14:16 / 489人阅读

摘要：指令模板显示第到第条记录总共条记录每页显示条记录指令列表数据接口请求参数请求对象数据事件名外部调用分页查询的事件监听事件服务配置参数加载数据改变页大小下一页上一页加载指定页

指令html模板

page.html

</>复制代码 
    
        
            
            显示第 {{(conf.currentPage-1) * conf.pageSize + 1}} 到第 {{conf.currentPage == conf.totalPage ? conf.total : conf.currentPage * conf.pageSize }} 条记录 , 总共 {{conf.total}} 条记录
            
            
                , 每页显示
                
                    
                        {{conf.pageSize}}
                        
                    
                                            
                            
                        
                    
                
                条记录
            
        
    
                    
                «
            
            
                 ‹ 
            
            
                
            
            
                 › 
            
            
                 »

指令

</>复制代码 
    app.directive("pagination", ["$http", "$q", function ($http, $q) {
            return {
                restrict: "E",
                templateUrl: "./modules/business/page.html",
                replace: true,
                scope: {
                    list: "=", //列表数据
                    url: "@", //接口url
                    method: "@", //get or post
                    requestParam: "=", //请求参数
                    requestData: "=", //请求对象数据
                    event: "@" //事件名, 外部调用分页查询的事件
                },
                link: function (scope, element) {
                    //监听事件
                    scope.$on(scope.event, function (event, data) {
                        console.log(scope.event, data);
                        scope.loadData();
                    });
    
                    //ajax服务
                    var AjaxService = {
                        get: function (url, params) {
                            var defered = $q.defer();
                            $http({
                                method: "GET",
                                url: url,
                                params: params
                            })
                                .success(function (data) {
                                    defered.resolve(data);
                                })
                                .error(function (err) {
                                    defered.reject(err);
                                });
                            return defered.promise;
                        },
                        post: function (url, params, data) {
                            var defered = $q.defer();
                            $http({
                                method: "POST",
                                url: url,
                                params: params,
                                data: data
                            })
                                .success(function (data) {
                                    defered.resolve(data);
                                })
                                .error(function (err) {
                                    defered.reject(err);
                                });
                            return defered.promise;
                        }
                    };
    
                    //配置参数
                    scope.conf = {
                        currentPage: 1,
                        totalPage: 1,
                        endPage: 1,
                        pageSize: 15,
                        pages: [],
                        total: 0,
                        pageSizeList: [10, 15, 20, 25, 30, 35, 40, 45, 50]
                    };
    
                    //加载数据
                    scope.loadData = function () {
                        scope.requestParam = scope.requestParam instanceof Object && scope.requestParam || {};
                        scope.requestData = scope.requestData instanceof Object && scope.requestData || {};
                        scope.requestParam.page = scope.conf.currentPage;
                        scope.requestParam.pageSize = scope.conf.pageSize;
    
                        var promise = null;
                        if (scope.method == "GET") promise = AjaxService.get(scope.url, scope.requestParam);
                        else if (scope.method == "POST") promise = AjaxService.post(scope.url, scope.requestParam, scope.requestData);
                        promise.then(function (resp) {
                            if (resp && resp.code == 0) {
                                if (resp.result && resp.result instanceof Array) scope.list = resp.result;
                                else scope.list = [];
                                if (resp.total && typeof(resp.total) == "number") scope.conf.total = resp.total;
                                else scope.conf.total = 0;
                            }
                            scope.calcPages();
                        });
                    };
    
                    //改变页大小
                    scope.changePageSize = function (n) {
                        scope.conf.pageSize = n;
                        scope.conf.currentPage = 1;
                        scope.loadData();
                    };
    
                    //下一页
                    scope.next = function () {
                        if (scope.conf.currentPage < scope.conf.totalPage) {
                            scope.conf.currentPage++;
                            scope.loadData();
                        }
                    };
    
                    //上一页
                    scope.prev = function () {
                        if (scope.conf.currentPage > 1) {
                            scope.conf.currentPage--;
                            scope.loadData();
                        }
                    };
    
                    //加载指定页
                    scope.loadPage = function (page) {
                        if (scope.conf.currentPage != page) {
                            scope.conf.currentPage = page;
                            scope.loadData();
                        }
                    };
    
                    //查询
                    scope.query = function () {
                        scope.conf.currentPage = 1;
                        scope.loadData();
                    };
    
                    //计算页数
                    scope.calcPages = function () {
                        //计算总页数
                        scope.conf.totalPage = Math.ceil(scope.conf.total / scope.conf.pageSize);
                        //生成快捷页码
                        if (scope.conf.currentPage > 1 && scope.conf.currentPage < scope.conf.totalPage) {
                            scope.conf.pages = [
                                scope.conf.currentPage - 1,
                                scope.conf.currentPage,
                                scope.conf.currentPage + 1
                            ];
                        } else if (scope.conf.currentPage == 1 && scope.conf.totalPage > 1) {
                            scope.conf.pages = [
                                scope.conf.currentPage,
                                scope.conf.currentPage + 1
                            ];
                        } else if (scope.conf.currentPage == scope.conf.totalPage && scope.conf.totalPage > 1) {
                            scope.conf.pages = [
                                scope.conf.currentPage - 1,
                                scope.conf.currentPage
                            ];
                        }
                    };
    
                    //指令加载完后立即查询
                    scope.query();
                }
            };
        }]);

</>复制代码 
为了代码集中一点, 我把ajaxservice定义在了内部. 
指令基本包含分页所需功能,且不需修改, 下次就可以直接引用.

应用

index.html

</>复制代码

示例代码中, list参数是双向绑定的列表数据, businesses就是页面table绑定的ng-repeat循环的列表集合, url是后台接口, event是事件名, method是接口方法,GET or POST, request-param就是请求参数,request-data就是请求体.

controller.js

</>复制代码 
    
    //分页请求参数
    $scope.requestParam = {};
    //分页请求对象(模糊查询时,对象属性可以为列表数据的字段)
    $scope.requestData = {};
    /**
     * 广播通知分页指令
     */
    $scope.query = function () {
        $scope.$broadcast("event-pagination-query-bp", "query");
    };

当新增数据或者更新数据后, 可以调用controller里的query方法, 通知指令进行分页查询

页面效果

云服务器 GPU云服务器 angular使用webrtc 指令简单实例简单分页 asp简单分页技术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81505.html

Angular分页指令, 简单配置即可使用

摘要：指令模板显示第到第条记录总共条记录每页显示条记录指令列表数据接口请求参数请求对象数据事件名外部调用分页查询的事件监听事件服务配置参数加载数据改变页大小下一页上一页加载指定页指令html模板 page.html 显示第 {{(conf.currentPage-1) * conf.pageSize + 1}}...

piglei 2019-08-01 16:18 评论0 收藏0
Angular 1 深度解析：脏数据检查与 angular 性能优化

摘要：通常写代码时我们无需主动调用或是因为在外部对我们的回调函数做了包装。类似的不只是这些事件回调函数，还有等。常量依旧会重复检查。会检查中有没有一个名为的成员。 TL;DR 脏检查是一种模型到视图的数据映射机制，由 $apply 或 $digest 触发。脏检查的范围是整个页面，不受区域或组件划分影响使用尽量简单的绑定表达式提升脏检查执行速度尽量减少页面上绑定表达式的个数（单次绑定...

fasss 2019-08-01 17:17 评论0 收藏0
Angular 1 深度解析：脏数据检查与 angular 性能优化

摘要：通常写代码时我们无需主动调用或是因为在外部对我们的回调函数做了包装。类似的不只是这些事件回调函数，还有等。常量依旧会重复检查。会检查中有没有一个名为的成员。 TL;DR 脏检查是一种模型到视图的数据映射机制，由 $apply 或 $digest 触发。脏检查的范围是整个页面，不受区域或组件划分影响使用尽量简单的绑定表达式提升脏检查执行速度尽量减少页面上绑定表达式的个数（单次绑定...

VioletJack 2019-08-20 18:26 评论0 收藏0
Angular（01）-- 架构概览

摘要：正文架构概览正文架构概览接触大概一个月吧，期间写了个项目，趁现在稍微有点时间，来回顾梳理一下。里的模块，并不等同于项目中的模块概念。当然，这只是我目前阶段的理解。声明本系列文章内容梳理自以下来源： Angular 官方中文版教程官方的教程，其实已经很详细且易懂，这里再次梳理的目的在于复习和巩固相关知识点，刚开始接触学习 Angular 的还是建议以官网为主。因为这系列文章，更多的会...

bitkylin 2019-04-23 11:46 评论0 收藏0
Angular 4 简单入门笔记

摘要：首先，我们需要在入口页面的中配置根路径然后创建一个路由模块路由配置在主模块中导入配置好的路由模块而在页面中需要一个容器去承载上面代码中的定义了用户点击后的路由跳转，定义该路由激活时的样式类。刚实习的时候用过AngularJS，那时候真的是连原生JavaScript都不会写，依样画葫芦做了几个管理后台。然后突然换项目了，AngularJS就不写了，感觉前前后后接触了一年多的Angula...

whlong 2019-08-20 17:44 评论0 收藏0