angular分页

最新推荐文章于 2020-02-27 21:15:08 发布
最新推荐文章于 2020-02-27 21:15:08 发布
阅读量767 收藏
点赞数
分类专栏： angular 文章标签： angular 分页

利用angular指令实现的分页

<!DOCTYPE html>
<html>

    <head lang="zh_CN">
        <meta charset="utf-8">
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
    </head>
    <style>
        ul>li {
            float: left;
            list-style: none;
            border: 1px solid red;
            padding: 4px;
        }
        ul>li>a {
            text-decoration: none;
        }

        .active {
            background: orange;
        }
    </style>

    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <ly-pagination page-option="option"></ly-pagination>
        </div>
        <script>
            var app = angular.module('myApp', []);

            app.directive('lyPagination', function() {
                return {
                    restrict: 'EA',
                    replace: true,
                    scope: {
                        option: '=pageOption'

                    },
                    template: '<ul class="pagination">' +
                        '<li ng-click="pageClick(p)" ng-repeat="p in page" class="{{option.curr==p?\'active\':\'\'}}">' +
                        '<a href="javascript:;">{{p}}</a>' +
                        '</li>' +
                        '<li>共{{option.all}}页</li>' +
                        '<li>到第<input type="number" min="1" max={{option.all}} ng-model="pageNum"/>页<button ng-click="jumpPage()">跳转</button></li>' +
                        '</ul>',
                    link: function($scope) {
                        //容错处理
                        if(!$scope.option.curr || isNaN($scope.option.curr) || $scope.option.curr < 1) {
                            $scope.option.curr = 1
                        }
                        if(!$scope.option.all || isNaN($scope.option.all) || $scope.option.all < 1) {
                            $scope.option.all = 1
                        }
                        if($scope.option.curr > $scope.option.all) {
                            $scope.option.curr = $scope.option.all
                        }
                        if(!$scope.option.count || isNaN($scope.option.count) || $scope.option.count < 1) {
                            $scope.option.count = 10
                        }                       
                        $scope.jumpPage=function(){
                            if($scope.pageNum==undefined||$scope.pageNum==null){
                                $scope.pageNum=$scope.option.all
                            }
                            $scope.option.curr = $scope.pageNum
                            $scope.option.click($scope.pageNum);
                            $scope.page = getRange($scope.option.curr, $scope.option.all, $scope.option.count);
                        }
                        //得到显示页数的数组
                        $scope.page = getRange($scope.option.curr, $scope.option.all, $scope.option.count);

                        //绑定点击事件
                        $scope.pageClick = function(page) {
                            if(page == '«') {
                                page = parseInt($scope.option.curr) - 1;
                            } else if(page == '»') {
                                page = parseInt($scope.option.curr) + 1;
                            } else if(page == '首页') {
                                page = 1
                            } else if(page == '尾页') {
                                page = $scope.option.all
                            }
                            if(page < 1) {
                                page = 1
                            } else if(page > $scope.option.all) {
                                page = $scope.option.all
                            }
                            //点击相同的页数 不执行点击事件
                            if(page == $scope.option.curr) {
                                return
                            }
                            if($scope.option.click && typeof $scope.option.click === 'function') {
                                $scope.option.click(page);
                                $scope.option.curr = page;
                                $scope.page = getRange($scope.option.curr, $scope.option.all, $scope.option.count);
                            }
                        };

                        //返回页数范围（用来遍历）
                        function getRange(curr, all, count) {

                            //计算显示的页数
                            curr = parseInt(curr);
                            all = parseInt(all);
                            count = parseInt(count);
                            var from = curr - parseInt(count / 2);
                            var to = curr + parseInt(count / 2) + (count % 2) - 1;
                            //显示的页数容处理
                            if(from <= 0) {
                                from = 1;
                                to = from + count - 1;
                                if(to > all) {
                                    to = all;
                                }
                            }
                            if(to > all) {
                                to = all;
                                from = to - count + 1;
                                if(from <= 0) {
                                    from = 1;
                                }
                            }
                            var range = [];
                            for(var i = from; i <= to; i++) {
                                range.push(i);
                            }
                            range.push('»');
                            range.push('尾页')
                            range.unshift('«');
                            range.unshift("首页")
                            return range;
                        }

                    }
                }
            });
            app.controller('myCtrl', function($scope) {
                //设置分页的参数
                $scope.option = {
                    curr: 1, //当前页数
                    all: 20, //总页数
                    count: 10, //最多显示的页数，默认为10
                pageNum:$scope.pageNum,
                    //点击页数的回调函数，参数page为点击的页数
                    click: function(page) {
                        console.log(page);
                        //这里可以写跳转到某个页面等...
                    }
                }
            });
        </script>
    </body>

</html>

里面有个关于跳转页面获取不到pageNum的bug（暂时不影响使用），请各位大佬指点
demo大部分内容来源于https://blog.csdn.net/peakchen_90/article/details/52995773，
只是添加了一个跳转页面。

ayong2112
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular分页组件
02-26
Angular自定义一个分页组件； 替代angular material提供的分页组件； 可根据个人需求做适当的修改；
angular 分页
weixin_30708329的博客
07-25 111
angular.module('AG.app').directive('tmPagination', function () { return { restrict: 'EA', templateUrl: 'common/layout/pager.html', replace: true, scope: { con...
angularJS（带分页插件）
11-13
angularjs带分页插件，可搭配博客教程使用。博客地址：https://blog.csdn.net/qq_37796017/article/details/84030762
Angular实现分页
JavaSupeMan的博客
02-27 2349
后端要求 1.导入依赖 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> </dependency> 2.创建一个p...
angular分页插件
07-05
本篇将详细介绍Angular分页插件及其相关的技术要点。 首先，我们要理解Angular分页插件的核心功能。正如标题所描述的，一个理想的分页插件应当具备以下特性： 1. **页码导航**：用户可以轻松地跳转到任意页面。这...
angular 分页插件
03-17
"Angular-Paging-master"这个压缩包文件名暗示了我们获取的是一个关于Angular分页的项目仓库的主分支。通常，这样的资源会包含源代码、示例、文档和其他相关资源，帮助开发者快速理解和集成分页功能。 标签中提到了...
angular分页指令操作
08-31
var app = angular.module("doSBill",[]); app.directive("rjDate", function() { // 指令逻辑 }); ``` 2. **指令模板**（`page.html`）： 指令模板定义了分页UI的结构，包括翻页按钮、当前页数、总页数等。...
AngularJs 分页实现
08-07
AngularJs轻松实现分页，加载数据速度块
AngularJS分页实现
weixin_36898943的博客
08-09 832
1. AngularJs 分页按钮原理: 这样生成的分页是有多少页显示多少个分页按钮:     1.首先在页面创建按钮区:         &lt;!--  分页按钮 --&gt;         &lt;div&gt;             &lt;ul class="pagination pull-right"&gt;                 &lt;li&gt;          ...
利用Angular+Angular-Ui实现分页（代码加简单）
12-29
今天我们来看看一种只实现分页没有查询的例子吧，先看效果： 采用了Angular-UI中的分页组件，关于Angular-UI如何使用请移步这里https://angular-ui.github.io/bootstrap/中的bootstrap章节（其中ui-router等我也建议你多看看） 注意：必须按照官网上引入相应的js和css才能生效，千万不要忘记了。 HTML代码如下： 省份1 省份2 省份
angular入门--分页
sinat_肖旭东的博客
06-15 425
目录分页可以说在web项目中是很常见的，经过几次百度总是得不到我需要的东西，所以多方搜索后，发现了一个还比较好用的分页插件，分享之。前端pagination是bootstrap或者jquery自带的一个插件，所以你需要下载他们被页面引入，<html> 查询框中的内容 <input type="text" ng-model="param.name" class="form-control" id="
Angular1.x实现分页和分页算法
xuehu837769474的博客
05-03 633
页面HTML代码： <!-- paging --> <ul class="pagination" style="margin: 0px;" > <li ng-class="{true:'disabled'}[p_current==1]"><a href="javascript:void(0);" ng-click="p_inde...
基于Angularjs实现分页功能
hsany330的专栏
11-08 2058
前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它，当然ng也不例外，在学习ng前我第一个想做的demo就是基于ng实现分页，除去基本的计算思路外就是使用指令封装成一个插件，在需要分页的列表页面内直接引用。 插件 在封装分页插件时我实现了几种方式总体都比较零散，最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的
angular实现手动分页
dongxingyan1的博客
10-15 530
工作问题总结——手动实现分页（2017-07-29）一、从后台获取所有数据进行分页前几天在做后台管理系统的时候涉及到很多的数据分页显示，因为后台给的数据里面没有分页请求，而是一次性请求数据，所以需要自己实现分页。 实现分页首先需要实现的是页码的展示，因此写了一个展示页码的函数，需要传入的参数有总页数和当前选择的页数。函数如下：paging(total, current) { //
Angular写一个分页控件
打字员blog
01-28 200
paginator.component.html &amp;lt;div class=&quot;row page-bar&quot;&amp;gt; &amp;lt;div class=&quot;left&quot; style=&quot;flex:1;&quot;&amp;gt; &amp;lt;span class=&quot;size-item&quot;&am
记录使用angular实现分页效果
yjwu5353的博客
08-29 820
记录使用angular实现分页效果
AngularJS实现分页显示
热门推荐
great_frank 的专栏
03-22 1万+
AngularJS的内建$location服务，以及利用$location服务的setter函数，实现前端分页显示的效果。
使用angular实现数据的分页
最新发布
04-21
很高兴为您解答，使用Angular实现数据的分页可以采用Angular Material的MatPaginator组件，通过指定pageSize、pageIndex和length来控制数据的分页。同时，也可以通过RxJS中的Observable和BehaviorSubject实现动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值