分页组件的使用

<!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. ORACLE SEQUENCE跳号总结

      在ORACLE数据库中,序列(SEQUENCE)是使用非常频繁的一个数据库对象,但是有时候会遇到序列(SEQUECNE)跳号(skip sequence numbers)的情形,那么在哪些情形下会 ...

  2. 各种选择框jQuery的选中方法

    select下拉列表的选中方法是:$("slect option:eq(1)").attr("selected",true);//选中第二个option che ...

  3. P问题、NP问题、NPC问题

    看师兄们的论文经常说一句这是个NP难问题,所以采用另外一种方法来代替(比如凸松弛,把l0范数的问题松弛为l1范数的问题来求解).然后搜索了相关知识,也还是没看太懂,把一些理论知识先贴上来,希望以后再接 ...

  4. Day3 - Linux系统安装_Centos6.9

    第1章 虚拟机安装  1.1 镜像下载 1.1.1 新版本下载 http://mirrors.aliyun.com  #阿里云官方镜像站点 1.1.2 旧版本下载 http://vault.cento ...

  5. java伪代码

    愚公移山的目标是毕力平险,指通豫南,达于汉阴,方法是扣石垦壤,箕畚运于渤海之尾 条件判断if(愚公死了)我的儿子替我完成.循环结构是“子又生孙,孙又生子,子子孙孙无穷匮也” import.java.大 ...

  6. Linux设置全局代理与yum代理

    设置全局代理,方法如下: 修改 /etc/profile 文件,添加下面内容: http_proxy=http://username:password@yourproxy:8080/ ftp_prox ...

  7. 团队作业4——第一次项目冲刺 SeCOnd DaY

    项目冲刺--Double Kill 喂喂喂,你好你好,听得见吗?这里是天霸动霸.tua广播站,我是主播小学生￥-￥ 第一次敏捷冲刺平稳的度过了第一天,第一天的任务大家也圆满完成啦[拍手庆祝],那么今天 ...

  8. 201521123103 《Java学习笔记》 第七周学习总结

    一.本周学习总结 1.以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 二.书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 源代码如下: pub ...

  9. 201521123015 《Java程序设计》第4周学习总结

    本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 1.多态:使用单一接口操作多种类型的对象. 2.private修饰属性,public修饰方法. 3 ...

  10. Servlet的生命周期与运行原理

    Servlet的生命周期:    1 加载classLoader    2 实例化 new    3 初始化 init(ServletConfig)    4 处理请求 service doGet d ...