Angularjs框架集成pagination

港控/mmm° 2022-06-08 09:56 296阅读 0赞

**一、安装插件（参考：[https://github.com/angular-ui/bootstrap][https_github.com_angular-ui_bootstrap]）**

1.首先集成bootstrap.min.css，下载地址：[https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css][https_cdn.bootcss.com_bootstrap_3.3.7_css_bootstrap.min.css]

2.其次集成 angular.js

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

**注意：** 注意版本问题，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][http_www.cnblogs.com_pilixiami_p_5634405.html]）

![Center][]

![Center 1][]

**三、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; }

![Center 2][]

[https_github.com_angular-ui_bootstrap]: https://github.com/angular-ui/bootstrap
[https_cdn.bootcss.com_bootstrap_3.3.7_css_bootstrap.min.css]: https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css
[http_angular-ui.github.io_bootstrap_ui-bootstrap-tpls-1.3.3.js]: http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js
[http_www.cnblogs.com_pilixiami_p_5634405.html]: http://www.cnblogs.com/pilixiami/p/5634405.html
[Center]: /images/20220608/23a8d32792ed48e7ab26309ceb7d1740.png
[Center 1]: /images/20220608/337f471318a441328d6c7e34d576037a.png
[Center 2]: /images/20220608/197621d0899f451fa5ac7c3c3503a7f6.png