AngularJS前端分页控件示例如何实现与自定义？

AngularJS实现的前端分页控件示例

在前端开发中,分页功能是数据展示的常见需求，尤其当数据量较大时，分页能有效提升页面加载性能和用户体验，本文将基于AngularJS框架，详细介绍如何实现一个功能完善的前端分页控件，包括分页逻辑、UI交互及数据绑定等核心内容。

分页控件的核心功能设计

一个实用的分页控件通常需要具备以下功能：

1. 页码导航：支持首页、上一页、下一页、末页跳转，以及直接输入页码跳转。
2. 页码显示：动态显示当前页码、总页数及每页数据条数。
3. 数据分页：根据当前页码和每页条数，截取对应的数据片段进行展示。
4. 样式定制：支持自定义分页按钮的样式，如禁用状态、激活状态等。

分页控件的实现步骤

数据模型与控制器初始化

在AngularJS控制器中定义分页所需的数据模型,包括当前页码（currentPage）、每页条数（pageSize）、总数据量（totalItems）以及分页后的数据（pagedItems）。

app.controller('PaginationController', function ($scope) {  
    // 模拟后端数据  
    $scope.allItems = [];  
    for (var i = 1; i <= 100; i++) {  
        $scope.allItems.push({ id: i, name: 'Item ' + i });  
    }  
    // 分页配置  
    $scope.currentPage = 1;  
    $scope.pageSize = 10;  
    $scope.totalItems = $scope.allItems.length;  
    // 计算总页数  
    $scope.totalPages = Math.ceil($scope.totalItems / $scope.pageSize);  
    // 初始化分页数据  
    $scope.setPage = function (page) {  
        if (page < 1 || page > $scope.totalPages) return;  
        $scope.currentPage = page;  
        $scope.updatePagedItems();  
    };  
    // 更新分页数据  
    $scope.updatePagedItems = function () {  
        var start = ($scope.currentPage - 1) * $scope.pageSize;  
        var end = start + $scope.pageSize;  
        $scope.pagedItems = $scope.allItems.slice(start, end);  
    };  
    // 初始化  
    $scope.updatePagedItems();  
});  

分页控件的模板设计

在HTML模板中,使用ng-repeat遍历分页数据，并通过ng-click绑定分页按钮的点击事件，以下是分页控件的完整模板示例：

<div ng-controller="PaginationController">  
    <!-- 数据展示区域 -->  
    <table class="table table-striped">  
        <thead>  
            <tr>  
                <th>ID</th>  
                <th>Name</th>  
            </tr>  
        </thead>  
        <tbody>  
            <tr ng-repeat="item in pagedItems">  
                <td>{{ item.id }}</td>  
                <td>{{ item.name }}</td>  
            </tr>  
        </tbody>  
    </table>  
    <!-- 分页控件 -->  
    <div class="pagination-container">  
        <ul class="pagination">  
            <!-- 首页按钮 -->  
            <li ng-class="{ disabled: currentPage === 1 }">  
                <a ng-click="setPage(1)">首页</a>  
            </li>  
            <!-- 上一页按钮 -->  
            <li ng-class="{ disabled: currentPage === 1 }">  
                <a ng-click="setPage(currentPage - 1)">上一页</a>  
            </li>  
            <!-- 页码按钮 -->  
            <li ng-repeat="page in getVisiblePages()"  
                ng-class="{ active: page === currentPage }">  
                <a ng-click="setPage(page)">{{ page }}</a>  
            </li>  
            <!-- 下一页按钮 -->  
            <li ng-class="{ disabled: currentPage === totalPages }">  
                <a ng-click="setPage(currentPage + 1)">下一页</a>  
            </li>  
            <!-- 末页按钮 -->  
            <li ng-class="{ disabled: currentPage === totalPages }">  
                <a ng-click="setPage(totalPages)">末页</a>  
            </li>  
        </ul>  
        <!-- 页码跳转输入框 -->  
        <div class="pagination-jump">  
            <span>跳转到第</span>  
            <input type="number" min="1" max="{{ totalPages }}"  
                   ng-model="jumpPage" ng-model-options="{ debounce: 500 }">  
            <span>页</span>  
            <button ng-click="setPage(jumpPage)">跳转</button>  
        </div>  
        <!-- 分页信息显示 -->  
        <div class="pagination-info">  
            <span>共 {{ totalItems }} 条数据，第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>  
        </div>  
    </div>  
</div>  

分页按钮的动态显示逻辑

为了避免页码按钮过多导致UI混乱,可以只显示当前页附近的页码（例如当前页前后各2页），通过以下方法实现：

$scope.getVisiblePages = function () {  
    var pages = [];  
    var start = Math.max(1, $scope.currentPage - 2);  
    var end = Math.min($scope.totalPages, $scope.currentPage + 2);  
    for (var i = start; i <= end; i++) {  
        pages.push(i);  
    }  
    return pages;  
};  

样式美化

通过CSS为分页控件添加样式,提升用户体验，以下是常用的分页样式：

.pagination-container {  
    margin: 20px 0;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    gap: 10px;  
}  
.pagination {  
    display: flex;  
    list-style: none;  
    padding: 0;  
}  
.pagination li {  
    margin: 0 5px;  
}  
.pagination li a {  
    display: block;  
    padding: 8px 12px;  
    border: 1px solid #ddd;  
    border-radius: 4px;  
    cursor: pointer;  
    text-decoration: none;  
    color: #333;  
}  
.pagination li.active a {  
    background-color: #007bff;  
    color: white;  
    border-color: #007bff;  
}  
.pagination li.disabled a {  
    cursor: not-allowed;  
    opacity: 0.5;  
}  
.pagination-jump input {  
    width: 50px;  
    padding: 5px;  
    margin: 0 5px;  
    border: 1px solid #ddd;  
    border-radius: 4px;  
}  
.pagination-info {  
    margin-left: 20px;  
    color: #666;  
}  

分页控件的扩展功能

每页条数动态调整

允许用户自定义每页显示的数据条数,例如下拉选择5、10、20条等。

$scope.pageSizes = [5, 10, 20, 50];  
$scope.selectedPageSize = 10;  
$scope.changePageSize = function () {  
    $scope.pageSize = $scope.selectedPageSize;  
    $scope.totalPages = Math.ceil($scope.totalItems / $scope.pageSize);  
    $scope.currentPage = 1;  
    $scope.updatePagedItems();  
};  

分页事件回调

在分页状态变化时触发回调函数,便于父控制器执行额外逻辑。

$scope.$watch('currentPage', function (newVal, oldVal) {  
    if (newVal !== oldVal) {  
        console.log('当前页码：', newVal);  
        // 可在此处添加其他逻辑，如触发API请求等  
    }  
});  

通过上述步骤,我们实现了一个功能完善的前端分页控件，包括页码导航、数据分页、样式定制及扩展功能，该控件基于AngularJS的数据绑定和指令机制，代码结构清晰，易于维护和扩展，在实际项目中，可根据需求进一步优化，例如添加加载动画、支持服务端分页等，以提升用户体验。

以下是分页控件的完整功能对比表：

通过AngularJS的模块化开发,分页控件可复用性强，适用于各类数据展示场景，是前端开发中非常实用的组件之一。