Pagination：

案例

<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href='../node_modules/bootstrap/dist/css/bootstrap.css'>

    <link rel="stylesheet" href='../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp.css'>

    <script src="../node_modules/angular/angular.min.js"></script>

    <script src="../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

    <script>

        angular.module('myApp',['ui.bootstrap'])

                .controller('PaginationDemoCtrl', function ($scope, $log) {

                    $scope.totalItems = 64;

                    $scope.currentPage = 4;

                    $scope.setPage = function (pageNo) {

                        $scope.currentPage = pageNo;

                    };

                    $scope.pageChanged = function() {

                        $log.log('Page changed to: ' + $scope.currentPage);

                    };

                    $scope.maxSize = 5;

                    $scope.bigTotalItems = 175;

                    $scope.bigCurrentPage = 1;

                });

    </script>

</head>

<body>

<div ng-controller="PaginationDemoCtrl">

    <h4>Default</h4>

    <uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>

    <uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></uib-pagination>

    <uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></uib-pagination>

    <uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></uib-pagination>

    <pre>The selected page no: {{currentPage}}</pre>

    <button type="button" class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>

    <hr />

    <h4>Limit the maximum visible buttons</h4>

    <h6><code>rotate</code> defaulted to <code>true</code>:</h6>

    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages"></uib-pagination>

    <h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>

    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></uib-pagination>

    <h6><code>rotate</code> set to <code>false</code>:</h6>

    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false"></uib-pagination>

    <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> defaulted to <code>true</code>:</h6>

    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></uib-pagination>

    <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> set to <code>false</code>:</h6>

    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>

    <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>

</div>

</body>

</html>

uib-pagination 配置

boundary-links C (Default: false) - 是否显示第一个/最后一个按钮

<uib-pagination

            total-items="totalItems"

            ng-model="currentPage"

            boundary-links="false">

    </uib-pagination>

<uib-pagination

            total-items="totalItems"

            ng-model="currentPage"

            boundary-links="true">

    </uib-pagination>

boundary-link-numbers $ C (Default: false) - 是否总是显示第一个和最后一个页码。如果最大页码大于设置的最小显示页数,则会在最大或最小页面和中间页面之间增加一个按钮，内容为省略号，如果最大页码小于设置的最小显示页数，则不显示省略号按钮

<uib-pagination

            total-items="bigTotalItems"

            ng-model="bigCurrentPage"

            max-size="maxSize"

            boundary-link-numbers="false"

            boundary-links="true">

    </uib-pagination>

<uib-pagination

            total-items="bigTotalItems"

            ng-model="bigCurrentPage"

            max-size="maxSize"

            boundary-link-numbers="true"

            boundary-links="true">

    </uib-pagination>

direction-links $ C (Default: true) - 是否显示之前/下一个按钮。

<uib-pagination

            total-items="bigTotalItems"

            ng-model="bigCurrentPage"

            direction-links="true">

    </uib-pagination>

<uib-pagination

            total-items="bigTotalItems"

            ng-model="bigCurrentPage"

            direction-links="false">

    </uib-pagination>

first-text C (Default: First) - 第一个按钮的文本。

force-ellipses $ C (Default: false) - 当总页数大于最大显示页数（max-size）显示省略号按钮

<uib-pagination

            total-items="bigTotalItems"

            ng-model="bigCurrentPage"

            max-size="maxSize"

            force-ellipses="true">

    </uib-pagination><br/>

    <uib-pagination

            total-items="bigTotalItems"

            ng-model="bigCurrentPage"

            max-size="maxSize"

            force-ellipses="false">

    </uib-pagination>

items-per-page $ C (Default: 10) - 每页最大显示条数的数量。值小于1表明所有项目在一个页上。
last-text C (Default: Last) - 最后一个按钮的文本。
max-size $ (Default: null) - 限制分页按钮显示的数量大小。
next-text C (Default: Next) - 下一个按钮的文本
ng-change $ - 点击分页按钮触发的方法，可用于更改不同页面数据
ng-disabled $ (Default: false) - 用于禁用分页组件。
ng-model $ - 当前页数. 第一页为1（即从1开始计算而不是0）.
num-pages $ readonly (Default: angular.noop) - 一个可选的配置，显示页面总数(这是个只读项，并不是可以通过设置页面数和当前页配置分页).

page-label (Default: angular.identity) - 可选的表达式，以覆盖基于传递当前页面索引的页标签。

$scope.pageLabel = '^_^';

<uib-pagination

            total-items="bigTotalItems"

            ng-model="bigCurrentPage"

            boundary-links="true"

            boundary-link-numbers="true"

            max-size="maxSize"

            page-label="pageLabel">

    </uib-pagination>

    <p>{{pageLabel}}</p>

previous-text C (Default: Previous) - 上一个按钮的文本

rotate $ C (Default: true) - 是否将当前激活页显示在中间。

<uib-pagination

            total-items="bigTotalItems"

            ng-model="bigCurrentPage"

            force-ellipses="'3'"

            boundary-links="true"

            boundary-link-numbers="true"

            max-size="maxSize"

            rotate="true">

    </uib-pagination>

    <uib-pagination

            total-items="bigTotalItems"

            ng-model="bigCurrentPage"

            force-ellipses="'3'"

            boundary-links="true"

            boundary-link-numbers="true"

            max-size="maxSize"

            rotate="false">

    </uib-pagination>

template-url (Default: uib/template/pagination/pagination.html) - 重写用于具有自定义模板提供的组件模板。
total-items $ - 所有页中的项目总数

angular-ui-bootstrap插件API - Pagination的更多相关文章

Angular -ui - BootStrap组件的解释以及使用
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...
angular分页插件tm.pagination 解决触发二次请求的问题
angular分页插件tm.pagination(解决触发二次请求的问题) DEMO: http://jqvue.com/demo/tm.pagination/index.html#?current ...
jquery ui bootstrap日期插件
http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...
20个超棒的jQuery bootstrap 插件
1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...
Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
Bootstrap插件的使用
昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...
Bootstrap插件概述
前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...
Easy UI常用插件使用
一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...
angular-ui-bootstrap插件API - Tabs
Tabs 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> ...

随机推荐

CODEFORCES#274 DIV2
A[傻逼题] 大意:给你a,b,c三个数,你可以在其中加上括号,加号,乘号,使得到的值最大就是问你 a+b+c,a*(b+c),(a+b)*c,a*b*c,(a+c)*b 哪个最大! 我去...这不 ...
Bootstrap3.0（进度条、媒体对象、列表组、面板）
Bootstrap3.0学习第十六轮(进度条.媒体对象.列表组.面板) 前言阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehy ...
IOS学习之路五（SpriteKit 开发飞机大战小游戏一）
参考SpriteKit 创建游戏的教程今天自己动手做了一下,现在记录一下自己怎么做的,今天之做了第一步,一共有三个部分. 第一步,项目搭建. 项目所用图片资源:点击打开链接 1.在Xcode打开之后, ...
.net postsharp编译时生成的代码？
使用PostSharp进行AOP框架设计:一个简单的原型 AOP已经不是一个什么新名词了,在博客园使用关键字搜索可以查出n多条关于AOP的介绍,这里就不再赘述了. 在Bruce Zhang's B ...
“MVC+Nhibernate+Jquery-EasyUI” 信息发布系统第六篇（图片新闻的添加以及带分页的静态页的生成）
“MVC+Nhibernate+Jquery-EasyUI” 信息发布系统第六篇(图片新闻的添加以及带分页的静态页的生成) 一.这篇文章主要是要实现:图片新闻的添加,无刷新图片的上传,以及添加新闻静 ...
“MVC+Nhibernate+Jquery-EasyUI”信息发布系统第二篇（数据库结构、登录窗口、以及主界面）
“MVC+Nhibernate+Jquery-EasyUI”信息发布系统第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增 ...
POJ 3348 Cows
题目大意: 给你n棵树,可以用这n棵树围一个圈,然后在圈里面可以养牛,每个牛需要50平方米的空间,问最多可以养多少牛? 其实就是求一个凸包,计算凸包面积,然后除以50,然后就得到答案,直接上模板了. ...
VPN pptp on linuxmint13/ubuntu12.04/debian VPS
VPN is a great thing when you are forced to be stuck somewhere. on ubuntu, you need to check out whe ...
应用之星在线app开发平台，菜鸟也会做应用
看着各类应用平台玲琅满目的应用,你是否幻想过,如果里面能有一款我开发的应用是件多NB的事,平凡的你肯定会说,我又不会设计又不会代码,怎么可能?现在告诉你,这不是幻想,即使你不会设计也不会代码,一样可以 ...
Fixjs实践——标签、按钮控件
Fixjs介绍 Fixjs是一款javascript界面基础框架,主要为开发复杂组件提供底层的框架支持. Fixjs 0.3.0主要增加了文本显示类fixjs.text.TextField 支持的主要 ...

angular-ui-bootstrap插件API - Pagination

Pagination：

uib-pagination 配置

angular-ui-bootstrap插件API - Pagination的更多相关文章

随机推荐

热门专题