Angularjs框架集成pagination

一、安装插件（参考：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.7ui-bootstrap-tpls-1.3.3.min.js：  1.3.3angular.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;}