AngularJS实现简单的分页功能

初学 AngularJS, 尝试着写一些小功能

代码逻辑写得略粗糙，仅仅只是实现了简单的分页功能，使用 AngularJS 尝尝鲜。

AngularJS Code (Users.js)

var Users = angular.module('Users', []);

Users.controller('UserList', function($scope, $http) {

    $scope.start        = 0;
    $scope.showLimit    = 10;
    $scope.count        = 0;

    /* Default Users List */
    $http.get('welcome/get_users' + '/' + $scope.start + '/' + $scope.showLimit).success(function(data){
        $scope.users = data;
    });

    /* Count Users */
    $http.get('welcome/count_users').success(function(data){
        $scope.count = data;
    });

    /* Pagination */
    $scope.page = function (start) {

        $scope.start = start < 0 ? 0 : start;
        if (start >= $scope.count)   $scope.start = $scope.count - $scope.showLimit;

        $http.get('welcome/get_users' + '/' + $scope.start + '/' + $scope.showLimit).success(function(data){
            $scope.users = data;
        });
    }

});

HTML Code

<head>
    <script src="angular.js"></script>
    <script src="Users.js"></script>
</head>
<body ng-controller="UserList">
<div id="container">
    <div id="user_list">
        Search: <input class="query" type="text" ng-model="query" placeholder="Query">
        <hr />
        <table>
            <thead>
                <th>ID</th>
                <th>User Name</th>
                <th>Phone Number</th>
                <th>Email</th>
            </thead>
            <tbody>
                <tr ng-repeat="user in users | filter:query">
                    <td>{{user.id}}</td>
                    <td>{{user.user_name}}</td>
                    <td>{{user.phone_number}}</td>
                    <td>{{user.email}}</td>
                </tr>
            </tbody>
        </table>
        <hr />
        <button ng-click="page(0)">First</button>
        <button ng-click="page(start - showLimit)">Prev</button>
        <button ng-click="page(start + showLimit)">Next</button>
        <button ng-click="page(count - showLimit)">Last</button>
        <input type="text" ng-model="gotoPage" />
        <button ng-click="page(gotoPage * showLimit)">GO</button>
    </div>
</div>
</body>

CSS Code (稍微美化了一下)

body {
    background-color: #fff;
    margin: 40px;
    font: 13px/20px normal Helvetica, Arial, sans-serif;
    color: #4F5155;
}
#user_list {
    margin: 15px;
}
#container {
    margin: 10px;
    border: 1px solid #D0D0D0;
    box-shadow: 0 0 8px #D0D0D0;
}
input {
    width: 40px;
    height: 19px;
    padding: 3px;
    color: #555;
    border-radius: 3px;
    border: 1px solid #ccc;
}
input.query {
    width: 100px;
}
button {
    padding: 5px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
td,th  {
    border: 1px solid #ccc;
    text-align: center;
    padding: 5px;
}

主要逻辑代码都是写死的，不灵活，慢慢改进吧。

— 于 2015年04月10日，共写了2033个字；

— 文内使用到的标签：AngularJS 分页

xinpureZhu

Menu

AngularJS实现简单的分页功能

AngularJS Code (Users.js)

HTML Code

CSS Code (稍微美化了一下)

3条回应：“AngularJS实现简单的分页功能”

发表评论取消回复

AngularJS Code (Users.js)

HTML Code

CSS Code (稍微美化了一下)

3条回应：“AngularJS实现简单的分页功能”

发表评论 取消回复

发表评论取消回复