分页组件的使用

<!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. windows转储文件(dmp)

    1. 何为转储文件      转储文件也就是我们常说的dump文件.可以把转储文件看成软件的某个时刻的一个快照.转储文件一般都是在软件出现问题时手动生成或者程序自动生成.下面我们介绍几种生成转储文件的 ...

  2. 2016-2017 ACM-ICPC, Egyptian Collegiate Programming Contest (ECPC 16) 题解

    题目链接:http://codeforces.com/gym/101147 2017/8/27日训练赛,题目情况9/11,Rank 4/79. A. The game of Osho 题意:定义一个子 ...

  3. 我的前端故事----我为什么用GraphQL

    背景 今年我在做一个有关商户的app,这是一个包含商户从入网到审核.从驳回提交到入网维护的完整的生命周期线下推广人员使用的客户端软件,但故事并没有这么简单... 疑问 随着app的逐渐完善,遇到的问题 ...

  4. eval浅解

    关于eval,你了解多少呢?来看看 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 需要一个参数(string),切必需.要计算的字符串,其中含有要计算的 JavaS ...

  5. servlet中的字符编码过滤器的使用

    一:简介 Servlet过滤器是客户端和目标资源的中间层组件,主要是用于拦截客户端的请求和响应信息.如当web容器收到一条客户端发来的请求 web容器判断该请求是否与过滤器相关联,如果相关联就交给过滤 ...

  6. nodejs本地服务器自动重启

    在我们开发node 应用的时候,一但你的应用已经启动了,这个时候如果你修改了服务端的文件,那么要是这个修改起作用,你必须手动停止服务然后再重新启动,这在开发过程中无疑是很烦人的一件事,最好是有一个能够 ...

  7. 个人作业3——（Alpha阶段）

    一.alpha 过程总结 1.这学期的软件工程作业,由于各种事情冲突和时间安排问题,前期并没有太多时间去好好应对,中途有很多次都想放弃.但最后还是咬咬牙在同学的帮助下完成了一些基本任务,在这门课程开始 ...

  8. 团队作业8——第二次项目冲刺（Beta阶段）5.25

    1.当天站立式会议照片 会议内容: 本次会议为第六次会议 本次会议在陆大楼3楼召开,本次会议内容: ①:检查总结上次任务完成情况 ②:安排今天的分工 ③:对昨天的问题进行讨论 ④:遇到困难,及时群里反 ...

  9. 测试与发布（Alpha版本）

    [Alpha阶段]测试报告 1.测试找出的BUG (1).这种情况刷新就好 (2).文件必须10个才行,多余10个的部分不会进入查重的部分,少于会出错: (3).文件保存在d:\files,由于有些原 ...

  10. 201521123048 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码 //child public class test extends P ...