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的更多相关文章

  1. Angular -ui - BootStrap组件的解释以及使用

    关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

  2. angular分页插件tm.pagination 解决触发二次请求的问题

    angular分页插件tm.pagination(解决触发二次请求的问题) DEMO:  http://jqvue.com/demo/tm.pagination/index.html#?current ...

  3. jquery ui bootstrap日期插件

    http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...

  4. 20个超棒的jQuery bootstrap 插件

    1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...

  5. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  6. Bootstrap插件的使用

    昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...

  7. Bootstrap插件概述

    前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...

  8. Easy UI常用插件使用

    一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...

  9. angular-ui-bootstrap插件API - Tabs

    Tabs 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> ...

随机推荐

  1. Effective C++(13) 用对象管理资源

    问题聚焦: 从这条准则开始,都是关于资源管理的. 资源,一旦用了它,将来必须还给系统. 本条准则,基于对象的资源管理办法,建立在C++的构造函数,析构函数和拷贝函数(拷贝构造函数和重载赋值操作符)的基 ...

  2. XMPP and SIP

    过去一年多,一直关注这方面的技术和发展,这里有一个简单的介绍,我觉得比较简洁明了.我做了一点翻译,还有我的一些评估.       SIP vs XMPP (Jabber) SIP and XMPP a ...

  3. UVA 141 The Spot Game 斑点游戏。。

     The Spot Game  The game of Spot is played on an NxN board as shown below for N = 4. During the game ...

  4. Myeclipse 10 for mac 破解版下载安装及破解方法

    下载地址:http://pan.baidu.com/share/link?shareid=463687&uk=1798617416 解压下载好的压缩包Myeclipse 10 for mac+ ...

  5. Jekyll报'Tag was never closed'错误

    使用jekyll的代码高亮功能.但是发现有时总是很恼人的出现错误,报告说'Tag was never closed'.可是我很确定的关闭了标签啊,真是令人恼怒啊.解决方案式什么哪?如果你对此有兴趣,请 ...

  6. ibatis实战之基础环境搭建

    关于ibatis的介绍.优缺点,以及ibatis和hibernate的比较再此不在赘述,可参阅其他资料. 一.准备工作 1.下载ibatis软件包http://download.csdn.net/de ...

  7. EL表达式与三目运算符

    在页面实现常量替换,比如 entity.auditi 的值如果为0显示不需要否则显示需要 因为需求就这两个值 所以使用三目运算符比较简洁 如果值为很多个 可使用if  else进行判断 ${entit ...

  8. synchronized和volatile的使用

    synchronized和volatile的使用 一步一步掌握线程机制(三)---synchronized和volatile的使用 现在开始进入线程编程中最重要的话题---数据同步,它是线程编程的核心 ...

  9. Javascript：由 “鸭子类型” 得出来的推论

    Javascript:由 “鸭子类型” 得出来的推论 背景 学动态语言的都知道一句话:“如果它走起来像鸭子,而且叫起来像鸭子,那么它就是鸭子”,Javascript也支持鸭子类型,下文就说说鸭子类型在 ...

  10. yowsup ( an application to use whatsapp) hack

    yowsup, in python https://github.com/tgalal/yowsup try this: http://hacktracking.blogspot.com.ar/201 ...