分页组件的使用

<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>pagination+table</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <script src="http://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script>

    <style>

    </style>

    <script>

        angular.module('myApp',['ui.bootstrap']).controller("paginationCtrl",function($scope,$log){

            $scope.data=[

                {index:'1',title:"标题一",content:'content 1'},

                {index:'2',title:"标题一",content:'content 1'},

                {index:'3',title:"标题一",content:'content 1'},

                {index:'4',title:"标题一",content:'content 1'},

                {index:'5',title:"标题一",content:'content 1'},

                {index:'6',title:"标题一",content:'content 1'},

                {index:'7',title:"标题一",content:'content 1'},

                {index:'8',title:"标题一",content:'content 1'},

                {index:'9',title:"标题一",content:'content 1'},

                {index:'10',title:"标题一",content:'content 1'},

                {index:'11',title:"标题一",content:'content 1'},

                {index:'12',title:"标题一",content:'content 1'},

                {index:'13',title:"标题一",content:'content 1'},

                {index:'14',title:"标题一",content:'content 1'},

                {index:'15',title:"标题一",content:'content 1'},

                {index:'16',title:"标题一",content:'content 1'},

                {index:'17',title:"标题一",content:'content 1'},

                {index:'18',title:"标题一",content:'content 1'}

            ];

            $scope.sec=[{id:1,name:"1"},{id:2,name:"2"},{id:4,name:"4"}]

            $scope.totalItems=$scope.data.length;//条目总数

            $scope.currentPage=1;//当前页面数

            $scope.pageSize=4;

            $scope.pageNum=Math.ceil($scope.totalItems/$scope.pageSize);

            $scope.allItem=[];

            for(var i=0;i<$scope.totalItems;i+=$scope.pageSize){

                $scope.allItem.push($scope.data.slice(i,i+$scope.pageSize));

            }

            $scope.changsize=function(){

                $scope.pageNum=Math.ceil($scope.totalItems/$scope.pageSize);

                $scope.currentPage=1;

                $scope.allItem=[];

                for(var i=0;i<$scope.totalItems;i=i+$scope.pageSize){

                    $scope.allItem.push($scope.data.slice(i,i+$scope.pageSize));

                }

            }

            $scope.page=null;

            $scope.changpage=function(){

                if($scope.page>0&&$scope.page<=$scope.pageNum)

                {$scope.currentPage=$scope.page;}

            }

        })

    </script>

</head>

<body>

    <div ng-controller="paginationCtrl">

        <div class="table">

            <table class="table table-striped">

                <thead>

                    <tr>

                        <th>序号</th>

                        <th>title</th>

                        <th>内容</th>

                    </tr>

                </thead>

                <tbody>

                    <tr ng-repeat="item in allItem[currentPage-1]">

                        <td>{{item.index}}</td>

                        <td>{{item.title}}</td>

                        <td>{{item.content}}</td>

                    </tr>

                </tbody>

            </table>

        </div>

        每页显示<select id="" name="" ng-model="pageSize" ng-change="changsize()" ng-options="o.id as o.name for o in sec">

        </select>

        <div>跳至<input type="text" ng-model="page" ng-change="changpage()">

            共{{pageNum}}页

            共{{totalItems}}条数据

            当前页{{currentPage}}

        </div>

        <div class="page">

            <ul uib-pagination

                boundary-links="true"

                class="pagination-lg"

                total-items="totalItems"

                ng-model="currentPage"

                items-per-page="pageSize"

                previous-text="&lsaquo;"

                next-text="&rsaquo;"

                first-text="&laquo;"

                last-text="&raquo;"

                max-size='7'

                boundary-link-numbers="true"

                >

            </ul>

            <ul uib-pager total-items="totalItems" ng-model="currentPage" items-per-page="pageSize"></ul>

        </div>

    </div>

    <script type="text/ng-template" id='list.html'>

        <ul>

            <li ng-repeat="item in items">{{item}}</li>

        </ul>

        <!-- max-size 显示的页面数目

        总条目 totalItems  total-items

        当前页面 currentPage  ng-model

        页面尺寸 pageSize  items-per-page

        页面数目 pageNum  -->

    </script>

</body>

</html>

angularui 分页的更多相关文章

  1. angular-ui分页组件

    http://angular-ui.github.io/bootstrap/#/pagination 分页组件只提供生成分页按钮,数据的显示需要使用ng-repeat, 注意设置 items-per- ...

  2. Angular+Angular-Ui实现分页（代码更加简单，更加容易懂哦）

    前面写了个分页,但是个人认为只能玩玩,实际业务上的话代码太繁杂(笔者想走代码.性能精简化之路[不知道哪天才能成为高手~·YY一下无伤大雅]),逻辑上有点混乱.那么今天我们来看看另外一种只实现分页没有查 ...

  3. 如何将angular-ui的分页组件封装成一个指令

    准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css ...

  4. 通过angularjs的directive以及service来实现的列表页加载排序分页

    前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...

  5. 通过angularjs的directive以及service来实现的列表页加载排序分页（转）

    前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...

  6. angular 分页插件的使用

    html: <pagination total-items="totalItems" ng-model="currentPage" items-per-p ...

  7. 记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题

    最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...

  8. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  9. JdbcTemplate+PageImpl实现多表分页查询

    一.基础实体 @MappedSuperclass public abstract class AbsIdEntity implements Serializable { private static ...

随机推荐

  1. CSS:a:link;visited;hover;active解释及正确顺序

    a:link 选择器设置指向普通的.未被访问页面的链接的样式, a:visited 选择器用于设置指向已被访问的页面的链接, a:active 选择器用于活动链接, a:hover 选择器用于选择鼠标 ...

  2. 2015苏州大学ACM-ICPC集训队选拔赛（3）题解

    第三次校赛链接:快戳我 1001 考虑前半组数,我们只需要标记每个数出现的次数,再加上这个数之前的数出现的次数,即为这个数在m次操作中总共需要翻转的次数(即求前缀和),再根据翻转的奇偶性判断最后这个位 ...

  3. Rxjava2视频笔记

    观察者模式 观察者模式是一对多的模式,多个观察者同时监听一个主题,当主题更新时,会同时通知所有的观察者 subject –>observer 学习新技术的步骤 1.官方文档的查阅和学习 2.Go ...

  4. [2017-08-16]ABP系列——QuickStartB:正确理解Abp解决方案的代码组织方式、分层和命名空间

    本系列目录:Abp介绍和经验分享-目录 介绍ABP的文章,大多会提到ABP框架吸收了很多最佳实践,比如: 1.N层 (复用一下上篇的图) 展现层(Personball.Demo.Web):asp.ne ...

  5. 神奇的background

    background:url() fixed ....  可以实现页面向下滚动时背景图片 保持位置不变   感觉好像背景在随鼠标滚动而滚动一样

  6. postman 第3节 API请求和查看响应结果(转)

    请求 postman支持很多请求类型,界面左侧可以看到请求类型:get.post.put.patch等,右侧是发送和保存按钮,下方是请求支持的认证方式.信息头.信息体.私有脚本和测试结果.下面我们介绍 ...

  7. MongoDB副本集模式安装

    设备: 三个1G.20G.1核的虚拟机,系统是SentOS7 min 设置目录: Server1: mkdir -p /home/mongoshard/data/shard11 /home/mongo ...

  8. 动态创建angular组件实现popup弹窗

    承接上文,本文将从一个基本的angular启动项目开始搭建一个具有基本功能.较通用.低耦合.可扩展的popup弹窗(脸红),主要分为以下几步: 基本项目结构搭建 弹窗服务 弹窗的引用对象 准备作为模板 ...

  9. 转：【Java并发编程】之二：线程中断（含代码）

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17091267 使用interrupt()中断线程 当一个线程运行时,另一个线程可以调用对应 ...

  10. Oracle数据库中直方图对执行计划的影响

    在Oracle数据库中,CBO会默认目标列的数据在其最小值low_value和最大值high_value之间均匀分布,并按照均匀分布原则,来计算目标列 施加查询条件后的可选择率以及结果集的cardin ...