ui-bootstrap中有两个分页控件，一个是轻量级的Pager，只有上一页和下一页的功能，另一个是功能完整的Pagination，除了上一页和下一页，还可以选择首页和最后页，并且支持多种页数的显示方式。

这是Pager的例子：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('PagerDemoCtrl', function ($scope) {

             $scope.totalItems = 64;

             $scope.currentPage = 4;

         });

     </script>

 </head>

 <body>

     <div ng-controller="PagerDemoCtrl">

         <h4>Pager</h4>

         <uib-pager total-items="totalItems" ng-model="currentPage" next-text="下一页" previous-text="上一页" num-pages="totalPage"></uib-pager>

         <pre>当前页：{{currentPage}},总页数：{{totalPage}}</pre>

  </div>

 </body>

 </html>

效果为：

Pager中可以使用的属性有：

属性名 默认值 备注
align true 上一页和下一页的按钮是否两边对齐
items-per-page 10 每页显示的数量.设置值小于1表示显示所有项
next-text Next » 下一页的按钮名称
ng-disabled false 是否禁用
ng-model   当前第几页
num-pages angular.noop 只读属性，表示总页数
previous-text « Previous 上一页的按钮名称
template-url uib/template/pager/pager.html  
total-items   总共有多少条数据

在Pager控件中，num-pages是只读属性，由控件根据total-items和items-per-page计算出总页数。

这是Pagination的例子：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

      <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('PaginationDemoCtrl', function ($scope) {

             $scope.maxSize = 5;

             $scope.totalItems = 175;

             $scope.currentPage = 1;

         });

     </script>

 </head>

 <body>

     <div ng-controller="PaginationDemoCtrl">

         <uib-pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" first-text="第一页" previous-text="上一页" next-text="下一页" last-text="最后页" boundary-links="true" boundary-link-numbers="true"></uib-pagination>

     </div>

 </body>

 </html>

效果为：

Pagination中可以使用的属性有：

属性名 默认值 备注
boundary-links false 是否显示第一页和最后一页的按钮
boundary-link-numbers false 是否显示第一页和最后一页的页数,并在页数过多时用…表示被隐藏的页数
direction-links true 是否显示上一页和下一页的按钮
first-text first 第一页的按钮的名字
last-text last 最后一页的按钮名字
previous-text Previous 上一页的按钮名字
next-text Next 下一页的按钮名字
force-ellipses false 是否在rotate被设置为true并且页数过多时显示为"…"
rotate true 是否保持当前在可视范围的中间
items-per-page 10 每页显示的数量.设置值小于1表示显示所有项
max-size null 可选择的页数范围(如果设置为5,当前页为10,总页数为100,那么可选择第8,9,10,11,12页)
ng-change   页数变化时调用的函数
ng-disabled false 是否禁用
ng-model   当前页数
num-pages angular.noop 只读属性，表示总页数
page-label angular.identity 设置页数标签的表达式
template-url uib/template/pagination/pagination.html  
total-items   总共有多少条数据

boundary-link-numbers，rotate和force-ellipses是用来控制页数按钮的显示方式，并且可以组合使用。

page-label是一个很有用的属性，可以设置一个表达式来改变页数按钮的文本，比如page-label="'p'+$page" 效果为：

目录：

AngularJs的UI组件ui-Bootstrap分享（一）

AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup

AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs

AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover

AngularJs的UI组件ui-Bootstrap分享（九）——Alert

AngularJs的UI组件ui-Bootstrap分享（十）——Model

AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination的更多相关文章

  1. Android用户界面UI组件--AdapterView及其子类(五) Spinner和SpinnerAdapter

    Spinner就是下拉框组件,可以自定义下拉布局样式,可以使用ArrayAdapter以及SpinnerAdapter适配 在Adapter中实现SpinnerAdapter,继承BaseAdapte ...

  2. Android用户界面 UI组件--TextView及其子类(五) DigitalClock,AnalogClock,RadioButton,CheckBox,ToggleButton汇总

    DigitalClock和AnalogClock两个时钟类 可以为DigitalClock设置背景图片,自定义时针,秒针,分针的样式 例子: <?xml version="1.0&qu ...

  3. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  4. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  5. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  6. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  7. 挂号平台首页开发（UI组件部分）

    JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...

  8. AngularJs的UI组件ui-Bootstrap分享（一）

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

  9. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

随机推荐

  1. 161220、使用Spring AOP实现MySQL数据库读写分离案例分析

    一.前言 分布式环境下数据库的读写分离策略是解决数据库读写性能瓶颈的一个关键解决方案,更是最大限度了提高了应用中读取 (Read)数据的速度和并发量. 在进行数据库读写分离的时候,我们首先要进行数据库 ...

  2. RegExp类型，单体内置对象

    1.RegExp类型:  1)什么是正则表达式:RegExp    --是一种规则,模式    --强大的字符串匹配工具    --创建:    --使用RegExp构造函数创建:var re=new ...

  3. flash性能优化方案整理（最全）

    性能优化的原则 1.避免过早优化:太早优化将使代码难以设计和维护,最好是针对程序的瓶颈进行优化. 2.改进性能有时需要权衡:不能一味注重改进性能,一个项目要考虑各方面的利弊,比如代码的健壮性,结构性, ...

  4. 原创开源项目HierarchyViewer for iOS 2.1 Beta新功能介绍

    回顾 HierarchyViewer for iOS是我们发布的一个开源项目,采用GPL v3.0协议. HierarchyViewer for iOS可以帮助iOS应用的开发和测试人员,在没有源代码 ...

  5. C/C++ 宏中的 #、#@、##的作用

    宏中的# 功能是将其后面的宏参数进行字符串化操作(Stringizing operator), 简单说就是在它引用的宏变量的左右各加上一个双引号. #define STRING(x) #x 下面二条语 ...

  6. EXCEL数据透视相关知识

    要边看边总结要点:1.部门管理,标准化作业流程,控制生产经营过程,预知风险2.这一项内容,用一个工作薄三个SHEET表来完成.分类汇总表(可变,N个),源数据表(标准.规范.通用.简洁.正确),1.符 ...

  7. 【leetcode❤python】 400. Nth Digit

    #-*- coding: UTF-8 -*- class Solution(object):    def findNthDigit(self, n):        ""&quo ...

  8. faster alter table add column

    Create a new table (using the structure of the current table) with the new column(s) included. execu ...

  9. [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列：实现基本的CRUD功能

    英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with Entity Framework 6 Code First using MVC 5 系列 ...

  10. HTTP笔记之一

    1  URL 统一资源定位符(URL)是资源标识符最常见的格式.大部分的URL都遵循一种标准格式,这种格式包含三个部分. URL的第一部分:方案(scheme),说明了访问资源所使用的协议类型.通常是 ...