AngularJS --- pagination.js分页组件

最新推荐文章于 2024-09-01 07:03:08 发布

__静禅__

最新推荐文章于 2024-09-01 07:03:08 发布

阅读量2.7k

点赞数 1

分类专栏： ------ AngularJS 前端

本文链接：https://blog.csdn.net/Ka_Ka314/article/details/79488848

版权

前端同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

------ AngularJS

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <title>入门小Demo-9分页</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <script src="../plugins/angularjs/angular.min.js"></script>
    <script src="../plugins/angularjs/pagination.js"></script>
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script>
        var app = angular.module('test', ['pagination']); //定义了一个叫myApp的模块
        //定义控制器
        app.controller('testController', function ($scope, $http) {

            // 分页控件配置
            // currentPage：当前页；totalItems：总记录数；itemsPerPage：每页记录数；perPageOptions：分页选项；onChange：当页码变更后自动触发的方法
            $scope.paginationConf = {
                currentPage: 1,
                totalItems: 10,
                itemsPerPage: 10,
                perPageOptions: [10, 20, 30, 40, 50],
                onChange: function () {
                    $scope.reloadList();//重新加载
                }
            };

            //重新加载列表 数据
            $scope.reloadList = function () {
                //切换页码
                $scope.findPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
            }

            $scope.findPage=function(page,size){
                $http.get('../test/findPage.do?page='+page+'&size='+size).success(
                    function(response){
                        $scope.list=response.rows;
                        $scope.paginationConf.totalItems=response.total;//更新总记录数
                    }
                );
            }

        });
    </script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="test" ng-controller="testController">
<div class="box-body">
    <!-- 数据表格 -->
    <div class="table-box">
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <tr>
                <th class="sorting_asc">品牌ID</th>
                <th class="sorting">品牌名称</th>
                <th class="sorting">品牌首字母</th>
            </tr>
            <tr ng-repeat="entity in list">
                <td>{{entity.id}}</td>
                <td>{{entity.name}}</td>
                <td>{{entity.firstChar}}</td>
            </tr>
        </table>
        <!--数据列表/-->
        <tm-pagination conf="paginationConf"></tm-pagination>
    </div>
</div>
</body>
</html>