AngularJS表格分页功能详解，如何实现前端高效分页？

AngularJS 作为一款经典的前端框架，其数据绑定和模块化特性为构建动态应用提供了强大支持，在数据展示场景中，表格分页功能是提升用户体验和性能的关键，本文将详细解析 AngularJS 表格分页功能的实现原理、核心步骤及优化技巧，帮助开发者高效构建高效分页组件。

分页功能的核心逻辑

表格分页的本质是将大量数据集拆分为多个小页面,通过控制当前显示的数据范围来实现分步加载，其核心逻辑包含三个关键要素：总数据量、每页显示条数和当前页码，基于这三个要素，可计算出当前页的数据起始索引（(currentPage - 1) * itemsPerPage）和结束索引（currentPage * itemsPerPage），再通过数组的 slice 方法截取对应数据片段进行渲染。

基础实现步骤

数据模型与分页参数初始化

在 AngularJS 控制器中，需定义原始数据集、分页配置参数和当前页数据：

angular.module('app').controller('TableCtrl', function($scope) {
    // 原始数据（通常从接口获取）
    $scope.allItems = [...]; // 总数据数组
    // 分页配置
    $scope.pagination = {
        currentPage: 1,    // 当前页码
        itemsPerPage: 10,  // 每页条数
        totalItems: $scope.allItems.length // 总条数
    };
    // 当前页数据（通过计算属性获取）
    $scope.currentPageItems = [];
    $scope.$watch('pagination.currentPage', updatePageData);
    function updatePageData() {
        const start = ($scope.pagination.currentPage - 1) * $scope.pagination.itemsPerPage;
        const end = start + $scope.pagination.itemsPerPage;
        $scope.currentPageItems = $scope.allItems.slice(start, end);
    }
});

表格模板渲染

在 HTML 模板中，使用 ng-repeat 指令遍历 currentPageItems 实现表格数据绑定：

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>创建时间</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in currentPageItems">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.createTime | date:'yyyy-MM-dd'}}</td>
        </tr>
    </tbody>
</table>

分页控件构建

分页控件通常包含页码按钮、上下页按钮和页码跳转功能，可通过 ng-repeat 动态生成页码按钮：

<div class="pagination">
    <button ng-click="pagination.currentPage=1" ng-disabled="pagination.currentPage===1">首页</button>
    <button ng-click="pagination.currentPage--" ng-disabled="pagination.currentPage===1">上一页</button>
    <!-- 页码按钮 -->
    <span ng-repeat="page in getPagesArray()">
        <button ng-click="pagination.currentPage=page" 
                ng-class="{active: pagination.currentPage===page}">
            {{page}}
        </button>
    </span>
    <button ng-click="pagination.currentPage++" 
            ng-disabled="pagination.currentPage===getTotalPages()">下一页</button>
    <button ng-click="pagination.currentPage=getTotalPages()" 
            ng-disabled="pagination.currentPage===getTotalPages()">末页</button>
    <span>共 {{getTotalPages()}} 页</span>
</div>

分页页码动态生成逻辑

为避免页码按钮数量过多,通常需要实现页码的智能显示（如显示当前页附近的页码），可在控制器中添加辅助方法：

$scope.getPagesArray = function() {
    const totalPages = $scope.getTotalPages();
    const pages = [];
    const current = $scope.pagination.currentPage;
    // 总页数小于等于7时显示所有页码
    if (totalPages <= 7) {
        for (let i = 1; i <= totalPages; i++) {
            pages.push(i);
        }
    } else {
        // 处理首尾页码和省略号逻辑
        pages.push(1);
        if (current > 3) pages.push('...');
        for (let i = Math.max(2, current - 1); i <= Math.min(totalPages - 1, current + 1); i++) {
            pages.push(i);
        }
        if (current < totalPages - 2) pages.push('...');
        pages.push(totalPages);
    }
    return pages;
};
$scope.getTotalPages = function() {
    return Math.ceil($scope.pagination.totalItems / $scope.pagination.itemsPerPage);
};

与服务端分页的集成

当数据量较大时,需采用服务端分页模式，此时前端仅需维护分页参数，通过 HTTP 请求获取对应页数据：

// 初始化时获取第一页数据
$scope.loadData = function(page) {
    $http.get('/api/items', {
        params: {
            page: page || $scope.pagination.currentPage,
            pageSize: $scope.pagination.itemsPerPage
        }
    }).then(function(response) {
        $scope.currentPageItems = response.data.items;
        $scope.pagination.totalItems = response.data.total;
    });
};
// 监听页码变化触发数据加载
$scope.$watch('pagination.currentPage', function(newPage) {
    $scope.loadData(newPage);
});

分页功能优化技巧

1. 响应式设计：通过 ng-class 动态调整表格样式，适配不同屏幕尺寸
2. 加载状态反馈：添加 ng-show 显示加载动画：

   <div ng-show="isLoading" class="loading-spinner"></div>

3. 每页条数动态调整：增加下拉选择控件：

   <select ng-model="pagination.itemsPerPage" ng-change="pagination.currentPage=1">
       <option value="5">5条/页</option>
       <option value="10">10条/页</option>
       <option value="20">20条/页</option>
   </select>

4. 性能优化：对大数据集使用 track by 减少 DOM 操作：

   <tr ng-repeat="item in currentPageItems track by item.id">

常见问题与解决方案

通过以上步骤和技巧,可构建出功能完善、性能优异的 AngularJS 表格分页组件，实际开发中还需根据具体业务需求进行调整，例如添加排序、筛选功能的联动，或集成第三方分页插件（如 uib-pagination）以提升开发效率，分页功能虽基础，但细节处理直接影响用户体验，值得开发者深入研究和实践。