AngularJS中HTML表格数据分页实现方案求助（新手向）

嘿，作为AngularJS新手碰到分页确实容易头大，我给你一个零第三方依赖、完全适配你现有结构的实现方案，一步步来很容易上手！

第一步：修改你的 Controller.js #

首先在控制器里注入$filter（用来做数据截取），然后添加分页相关的变量和逻辑：

angular.module('yourAppName')
.controller('DealsController', function($scope, featuredeals, $filter) {
    // 分页核心变量
    $scope.currentPage = 1; // 当前页码，默认第一页
    $scope.itemsPerPage = 10; // 每页显示10条，可根据需求调整
    $scope.totalItems = 0; // 总数据条数
    $scope.paginatedDeals = []; // 分页后要展示的数据

    // 从API获取数据
    featuredeals.getDeals().then(function(response) {
        $scope.allDeals = response.data; // 保存原始所有数据
        $scope.totalItems = $scope.allDeals.length; // 更新总条数
        $scope.getPaginatedDeals(); // 初始化分页数据
    });

    // 分页逻辑函数：根据当前页和每页条数截取数据
    $scope.getPaginatedDeals = function() {
        var startIndex = ($scope.currentPage - 1) * $scope.itemsPerPage;
        // 使用limitTo过滤器：先跳过前startIndex条，再取itemsPerPage条
        $scope.paginatedDeals = $filter('limitTo')(
            $filter('limitTo')($scope.allDeals, startIndex + $scope.itemsPerPage), 
            $scope.itemsPerPage, 
            startIndex
        );
    };

    // 切换页码的函数
    $scope.setPage = function(pageNumber) {
        if (pageNumber >= 1 && pageNumber <= $scope.totalPages()) {
            $scope.currentPage = pageNumber;
            $scope.getPaginatedDeals(); // 更新分页数据
        }
    };

    // 计算总页数
    $scope.totalPages = function() {
        return Math.ceil($scope.totalItems / $scope.itemsPerPage);
    };

    // 上一页/下一页快捷函数
    $scope.prevPage = function() {
        if ($scope.currentPage > 1) {
            $scope.setPage($scope.currentPage - 1);
        }
    };

    $scope.nextPage = function() {
        if ($scope.currentPage < $scope.totalPages()) {
            $scope.setPage($scope.currentPage + 1);
        }
    };
});

第二步：修改你的 index.html 模板 #

把原来展示全量数据的表格，改成绑定分页后的数据paginatedDeals，然后在表格下方添加分页控件：

<!-- 表格部分 -->
<table>
    <thead>
        <tr>
            <!-- 你的表头，比如 -->
            <th>Deal Name</th>
            <th>Price</th>
            <th>Category</th>
        </tr>
    </thead>
    <tbody>
        <!-- 注意这里用 paginatedDeals 替代原来的全量数据数组 -->
        <tr ng-repeat="deal in paginatedDeals">
            <td>{{deal.name}}</td>
            <td>{{deal.price}}</td>
            <td>{{deal.category}}</td>
        </tr>
    </tbody>
</table>

<!-- 分页控件 -->
<div class="pagination-controls">
    <!-- 上一页按钮，当前页是第一页时禁用 -->
    <button ng-click="prevPage()" ng-disabled="currentPage === 1">上一页</button>

    <!-- 页码显示 -->
    <span>第 {{currentPage}} 页 / 共 {{totalPages()}} 页</span>

    <!-- 下一页按钮，当前页是最后一页时禁用 -->
    <button ng-click="nextPage()" ng-disabled="currentPage === totalPages()">下一页</button>

    <!-- 可选：添加页码跳转输入框 -->
    <input type="number" min="1" max="{{totalPages()}}" ng-model="currentPage" ng-change="setPage(currentPage)">
</div>

关键说明 #

1. 数据保存：我们把从API拿到的全量数据存在$scope.allDeals里，分页时只是截取其中的一部分，不会重复请求API，性能友好。
2. 分页逻辑：通过计算起始索引startIndex，用AngularJS内置的limitTo过滤器来截取对应页的数据，不需要额外写复杂的循环。
3. 控件交互：分页按钮的禁用状态用ng-disabled控制，避免用户点击无效页码；输入框跳转则通过ng-change触发分页更新。

这个方案完全基于AngularJS原生功能，没有引入额外依赖，代码也很直观，新手跟着改就能跑起来～

内容的提问来源于stack exchange，提问作者Ashok