分页组件的使用

<!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. [js高手之路]面向对象+设计模式+继承一步步改造简单的四则运算

    到目前为止,我已经写完了面向对象完整的一个系列知识,前面基本属于理论,原理的理解,接下来,我们就用学到的知识来实战下吧. 看看理解原理和理论是否重要?例子从简单到复杂 一.单体(字面量)封装加减乘除 ...

  2. HTML5无插件多媒体Media——音频audio与视频video

    文件日志地址  http://blog.csdn.net/q1056843325/article/details/60336226 音频与视频现在已经变得越来越流行 各个网站为了保证跨浏览器的兼容性 ...

  3. Spring（一）--作用、IOC容器细节、搭配环境、Spring实验

    1.Spring作用:      1.生态体系庞大,全能型选手![springmvc是其一个子模块,jdbcTemplate能直接操作数据库!]      2.将其他组件粘合在一起      比如将S ...

  4. asp.net MVC  Ajax.BeginForm 异步上传图片的问题

    当debug到这里,你们就发现不管是 Request.Files["Upload"]亦或 Request.Files[0] 都不会取到文件流. 这就是我要说的,当使用Ajax.Be ...

  5. 微信JS-API封装接口——node.js版

    github:https://github.com/xjnotxj/wechat_interaction_jsapi Wechat JS-API接口 功能: 用于管理和获取微信 JSSDK 生产的ac ...

  6. 关于makefile中变量的多次赋值以及override指令

    1 基本原则如下 1.1 原则1 变量的普通赋值是有先后顺序的,后面的赋值会覆盖掉前面的赋值. 1.2 原则2 使用的时候,用的是其前面最后的赋值,就算其后面有使用了override指令的赋值也不会影 ...

  7. Spring-boot:快速搭建微服务框架

    前言: Spring Boot是为了简化Spring应用的创建.运行.调试.部署等而出现的,使用它可以做到专注于Spring应用的开发,而无需过多关注XML的配置. 简单来说,它提供了一堆依赖打包,并 ...

  8. jackjson和fastjson进行Bean与json互换

    1.jackjson 1.bean到json ObjectMapper m = new ObjectMapper(); String value = m.writeValueAsString(bean ...

  9. Redis集群的相关概念

    1.1 redis-cluster架构图 架构细节: (1)所有的redis节点彼此互联(PING-PONG机制),内部使用二进制协议优化传输速度和带宽. (2)节点的fail是通过集群中超过半数的节 ...

  10. React——组件

    一.创建组件 在React中有两种创建组件的方式,分别是函数形式的组件和类形式的组件 //函数形式: function Welcome(props){ return <p>this is ...