AnglarJS(二)分页插件使用_angular使用a阿里分页插件-优快云博客

本文介绍如何在AngularJS项目中使用分页插件，包括引入必要的js和css文件，配置分页插件，定义刷新及分页查询方法等步骤。

1.引入分页js，css插件

1）在js中引入

<!-- 分页组件开始 -->
<!--css-->
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!--js-->
<script src="../plugins/angularjs/pagination.js"></script>
<!-- 分页组件结束 -->

2)在模块中引入插件

//控制器模块儿
    var app = angular.module('pyg', [ 'pagination' ]);

2、引入AnglarJS分页控件

1）在在控制器下引入分页插件控制器

//1）在在控制器下引入分页插件控制器
//分页控件配置
                $scope.paginationConf = {
                    currentPage : 1,
                    totalItems : 10,
                    itemsPerPage : 10,
                    perPageOptions : [ 10, 20, 30, 40, 50 ],
                    onChange : function() {
                        $scope.reloadList();//重新加载
                    }
                };

2）在页面body中引入分页插件视图

<!--2）在页面body中引入分页插件视图-->
<!-- 分页视图 -->
<!-- conf="paginationConf" ：视图引用控制器方法配置-->
            <tm-pagination conf="paginationConf"></tm-pagination>

3、定义刷新方法，该方法会在数据发生变化时自动加载

                //刷新页面
                $scope.reloadList = function() {

                    $scope.findPage($scope.paginationConf.currentPage,
                            $scope.paginationConf.itemsPerPage)

                };

4、定义分页查询方法

                //分页查询
                $scope.findPage = function(page, rows) {

                    var url = "/brand/findPage?page=" + page
                            + "&rows=" + rows;
                    $http.post(url).success(function(data) {
                        $scope.entitys = data.rows;
                        $scope.paginationConf.totalItems = data.total;
                    })

                };