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. CSS3响应式布局之弹性盒子

    CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...

  2. C++ Programming language读书笔记

    C语言,结构化程序设计.自顶向下.逐步求精及模块化的程序设计方法;使用三种基本控制结构构造程序,任何程序都可由顺序.选择.循环三种基本控制结构构造. 模块结构:"独立功能,单出.入口&quo ...

  3. 修改linux下某一个文件夹下所有文件内容

    find /data/app_resource -type f |xargs sed -i 's/192.168.220.126/192.168.221.160/g'

  4. javascript 设计模式1----单例模式

    定义:保证一个类仅有一个实例,并提供一个访问的全局接口: 就是收:当我们 var a = new a(); var a1 = new a()是:a与a1是相等的.怎么实现呢,就是第一次实例化.第二不在 ...

  5. Android开发之MediaRecorder类详解

    MediaRecorder类介绍: MediaRecorder类是Android sdk提供的一个专门用于音视频录制,一般利用手机麦克风采集音频,摄像头采集图片信息. MediaRecorder主要函 ...

  6. winform在不同电脑分辨率

    private void InitializeComponent() { //设定按字体来缩放控件 this.AutoScaleMode = System.Windows.Forms.AutoScal ...

  7. 视频 之自定义VideoView

    package com.lvshandian.partylive.view;import android.content.Context;import android.util.AttributeSe ...

  8. [问题2014S13] 解答

    [问题2014S13]  解答 (1) 先证必要性:若 \(A=LU\) 是 非异阵 \(A\) 的 \(LU\) 分解,则 \(L\) 是主对角元全部等于 1 的下三角阵,\(U\) 是主对角元全部 ...

  9. python高性能代码之多线程优化

    以常见的端口扫描器为实例 端口扫描器的原理很简单,操作socket来判断连接状态确定主机端口的开放情况. import socket def scan(port): s = socket.socket ...

  10. centos7 firewall 防火墙 命令

    为了架设ss在vultr上买了一个日本的vps 用的是centos7的系统 防火墙是 firewall 捣鼓了两天 在这里总结一下. 如果小伙伴也准备在vultr上买vps  在注册是 可以使用这个优 ...