Angularjs框架集成pagination

最新推荐文章于 2019-06-29 09:59:00 发布

原创最新推荐文章于 2019-06-29 09:59:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#pagination #Angularjs #ui-bootstrap-tpls-1.

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Angular应用中使用UI Bootstrap分页组件。包括安装所需的文件、配置Angular项目，以及在HTML页面中实现分页功能的具体步骤。同时提供了控制器层的初始化代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装插件（参考：https://github.com/angular-ui/bootstrap）

1.首先集成bootstrap.min.css，下载地址：https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css

<link rel="stylesheet" href="/res/js/libs/bootstrap/3.3.7/bootstrap.min.css">

2.其次集成 angular.js

<script src="/res/js/libs/angular.js/1.4.6/angular.js"></script>

3.最后集成 ui-bootstrap-tpls-1.3.3.min.js；下载地址：http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js

<script src="/res/js/libs/angular-ui-bootstrap/ui-bootstrap-tpls-1.3.3.min.js"></script>

注意： 注意版本问题，gitub上有相关的说明，测试成功的如下：

bootstrap.min.css：               3.3.7
ui-bootstrap-tpls-1.3.3.min.js：  1.3.3
angular.js：                      1.4.6

二、html页面代码如下：

   <uib-pagination items-per-page="mySurvey.pageSize" total-items="mySurvey.totalItems"
                            ng-model="mySurvey.currentPage" max-size="mySurvey.maxSize"
                            first-text="<<" previous-text="<" next-text=">"
                            last-text=">>" boundary-links="true" boundary-link-numbers="false"
                            ng-change="mySurvey.pageChange()">
   </uib-pagination>

其中：Pagination中可以使用的属性有：（参考： http://www.cnblogs.com/pilixiami/p/5634405.html）

三、js（controller层）的页面如下：

 init();

  function init() {
      vm.pageSize = 10;
      vm.currentPage = 1;
      vm.maxSize = 1;
      vm.totalItems = 200;
  }

  function pageChangeFn() {
            console.log(vm.currentPage);
        }

四、修改样式，F12键查看分页的样式，然后进行修改。如下为一个简单的例子，修改后的结果如图

/*分页样式设置 */
.pagination>li>a,
.pagination>li>span{
  color: #e61f25;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover{
  background-color: #e61f25;
  border-color: #e61f25;
}

.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover{
  color: #ccc;
}