分页组件的使用

<!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. 用PE安装操作系统时：无法创建新的系统分区 也无法定位现有系统分区 的解决办法

    借助U盘的用PE安装操作系统时系统提示:无法创建新的系统分区 也无法定位现有系统分区 的解决办法... --------------------------------- 具体原因是安装时加载到安装程 ...

  2. 【Weblogic】在linux创建domain过慢的解决方法

    修改Linux上Weblogic使用的jdk $JAVA_HOME/jre/lib/security/java.security 文件 将 securerandom.source=file:/dev/ ...

  3. 手机自带输入法emoji表情的输入，提交及显示——纯前端解决方案

    很早之前就遇到过需要前端支持用户输入并提交emoji表情的问题,一直没有尝试去解决,今天再一次狭路相逢,该来的躲不过,那就着手解决吧. 大多数emoji表情都是4字节的utf-16编码(辅助平面字符, ...

  4. The C++ Programming Language 学习笔记 第5章 指针、数组和结构

    1.关于输出指向字符的指针的值. 现在定义,char c='a',char* pc=&c.在C中,输出该值只需要printf("%p\n",pc);而在C++中,如果cou ...

  5. jQuery圣诞雪花

    <script type="text/javascript"> $(function(){ var d="<div class='y_snow'> ...

  6. maven 搭新建成之后 无法创建 src/main/java 目录解决

    maven项目创建后 创建 src/main/java     和   src/main/test 会报错,目录已存在 打开build path 界面    src/main/java     和   ...

  7. [2014-11-02]为EF6+Mysql+CodeFirst启用Migration

    刚为一个EF6 CodeFirst项目启用了Migration,记几个注意点. 启用方法 在Nuget控制台使用以下命令启用Migration Enable-Migrations #此时生成当前数据库 ...

  8. [js高手之路]javascript腾讯面试题学习封装一个简易的异步队列

    这道js的面试题,是这样的,页面上有一个按钮,一个ul,点击按钮的时候,每隔1秒钟向ul的后面追加一个li, 一共追加10个,li的内容从0开始技术( 0, 1, 2, ....9 ),首先我们用闭包 ...

  9. Flask04 后台获取请求数据、视图函数返回类型、前台接受响应数据

    1 后台获取请求数据 1.1 提出问题 前台发送请求的方式有哪些 后台如何获取这些请求的参数 1.2 前台发送请求的方式 GET.POST.AJAX 点睛:如果不指定请求方式,浏览器默认使用GET请求 ...

  10. SessionStateMode之Redis共享session

    周六的时候用SQL Server来实现session共享,今天下班早就试了下使用Redis来实现session共享.接着上一篇博客,上一篇使用sessionState节点mode="SQLS ...