Angular分頁指令, 簡單配置即可使用

Magicer 發(fā)布于2019-08-20 14:16 / 431人閱讀

摘要：指令模板顯示第到第條記錄總共條記錄每頁顯示條記錄指令列表數(shù)據(jù)接口請求參數(shù)請求對象數(shù)據(jù)事件名外部調用分頁查詢的事件監(jiān)聽事件服務配置參數(shù)加載數(shù)據(jù)改變頁大小下一頁上一頁加載指定頁

指令html模板

page.html

    
        
            
            顯示第 {{(conf.currentPage-1) * conf.pageSize + 1}} 到第 {{conf.currentPage == conf.totalPage ? conf.total : conf.currentPage * conf.pageSize }} 條記錄 , 總共 {{conf.total}} 條記錄
            
            
                , 每頁顯示
                
                    
                    
                        
                            
                        
                    
                
                條記錄
            
        
    
        
            
                ?
            
            
                 ? 
            
            
                
            
            
                 ? 
            
            
                 ?

指令

    app.directive("pagination", ["$http", "$q", function ($http, $q) {
            return {
                restrict: "E",
                templateUrl: "./modules/business/page.html",
                replace: true,
                scope: {
                    list: "=", //列表數(shù)據(jù)
                    url: "@", //接口url
                    method: "@", //get or post
                    requestParam: "=", //請求參數(shù)
                    requestData: "=", //請求對象數(shù)據(jù)
                    event: "@" //事件名, 外部調用分頁查詢的事件
                },
                link: function (scope, element) {
                    //監(jiān)聽事件
                    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;
                        }
                    };
    
                    //配置參數(shù)
                    scope.conf = {
                        currentPage: 1,
                        totalPage: 1,
                        endPage: 1,
                        pageSize: 15,
                        pages: [],
                        total: 0,
                        pageSizeList: [10, 15, 20, 25, 30, 35, 40, 45, 50]
                    };
    
                    //加載數(shù)據(jù)
                    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();
                    };
    
                    //計算頁數(shù)
                    scope.calcPages = function () {
                        //計算總頁數(shù)
                        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參數(shù)是雙向綁定的列表數(shù)據(jù), businesses就是頁面table綁定的ng-repeat循環(huán)的列表集合, url是后臺接口, event是事件名, method是接口方法,GET or POST, request-param就是請求參數(shù),request-data就是請求體.

controller.js

    

    //分頁請求參數(shù)
    $scope.requestParam = {};
    //分頁請求對象(模糊查詢時,對象屬性可以為列表數(shù)據(jù)的字段)
    $scope.requestData = {};

    /**
     * 廣播通知分頁指令
     */
    $scope.query = function () {
        $scope.$broadcast("event-pagination-query-bp", "query");
    };

當新增數(shù)據(jù)或者更新數(shù)據(jù)后, 可以調用controller里的query方法, 通知指令進行分頁查詢

頁面效果

云服務器 GPU云服務器 angular使用webrtc 指令簡單實例簡單分頁 asp簡單分頁技術

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81505.html

Angular分頁指令, 簡單配置即可使用

摘要：指令模板顯示第到第條記錄總共條記錄每頁顯示條記錄指令列表數(shù)據(jù)接口請求參數(shù)請求對象數(shù)據(jù)事件名外部調用分頁查詢的事件監(jiān)聽事件服務配置參數(shù)加載數(shù)據(jù)改變頁大小下一頁上一頁加載指定頁指令html模板 page.html 顯示第 {{(conf.currentPage-1) * conf.pageSize + 1}}...

piglei 2019-08-01 16:18 評論0 收藏0
Angular 1 深度解析：臟數(shù)據(jù)檢查與 angular 性能優(yōu)化

摘要：通常寫代碼時我們無需主動調用或是因為在外部對我們的回調函數(shù)做了包裝。類似的不只是這些事件回調函數(shù)，還有等。常量依舊會重復檢查。會檢查中有沒有一個名為的成員。 TL;DR 臟檢查是一種模型到視圖的數(shù)據(jù)映射機制，由 $apply 或 $digest 觸發(fā)。臟檢查的范圍是整個頁面，不受區(qū)域或組件劃分影響使用盡量簡單的綁定表達式提升臟檢查執(zhí)行速度盡量減少頁面上綁定表達式的個數(shù)（單次綁定...

fasss 2019-08-01 17:17 評論0 收藏0
Angular 1 深度解析：臟數(shù)據(jù)檢查與 angular 性能優(yōu)化

摘要：通常寫代碼時我們無需主動調用或是因為在外部對我們的回調函數(shù)做了包裝。類似的不只是這些事件回調函數(shù)，還有等。常量依舊會重復檢查。會檢查中有沒有一個名為的成員。 TL;DR 臟檢查是一種模型到視圖的數(shù)據(jù)映射機制，由 $apply 或 $digest 觸發(fā)。臟檢查的范圍是整個頁面，不受區(qū)域或組件劃分影響使用盡量簡單的綁定表達式提升臟檢查執(zhí)行速度盡量減少頁面上綁定表達式的個數(shù)（單次綁定...

VioletJack 2019-08-20 18:26 評論0 收藏0
Angular（01）-- 架構概覽

摘要：正文架構概覽正文架構概覽接觸大概一個月吧，期間寫了個項目，趁現(xiàn)在稍微有點時間，來回顧梳理一下。里的模塊，并不等同于項目中的模塊概念。當然，這只是我目前階段的理解。聲明本系列文章內容梳理自以下來源： Angular 官方中文版教程官方的教程，其實已經(jīng)很詳細且易懂，這里再次梳理的目的在于復習和鞏固相關知識點，剛開始接觸學習 Angular 的還是建議以官網(wǎng)為主。因為這系列文章，更多的會...

bitkylin 2019-04-23 11:46 評論0 收藏0
Angular 4 簡單入門筆記

摘要：首先，我們需要在入口頁面的中配置根路徑然后創(chuàng)建一個路由模塊路由配置在主模塊中導入配置好的路由模塊而在頁面中需要一個容器去承載上面代碼中的定義了用戶點擊后的路由跳轉，定義該路由激活時的樣式類。剛實習的時候用過AngularJS，那時候真的是連原生JavaScript都不會寫，依樣畫葫蘆做了幾個管理后臺。然后突然換項目了，AngularJS就不寫了，感覺前前后后接觸了一年多的Angula...

whlong 2019-08-20 17:44 評論0 收藏0