Angular时间与状态码过滤分页异常：按钮未失效+最大页码不更新

问题根源分析 #

1. 分页按钮状态判断逻辑错误 #

你的checkNextPageContent和checkPreviousPageContent函数计算的是当前页的记录，而非对应上/下一页的记录：

• checkNextPageContent中误用了当前页的起始索引，导致判断的是当前页是否有数据，而非下一页
• checkPreviousPageContent同理，判断逻辑指向当前页而非上一页的记录情况

2. maxPage变量未随过滤结果更新 #

初始maxPage基于原始全量数据计算，当过滤条件（时间/状态码）变化时，未重新计算过滤后总记录数对应的最大页码，导致导航逻辑依赖错误的页码上限。

修复方案 #

步骤1：修正分页按钮状态判断函数 #

function checkPreviousPageContent() {
    // 上一页是currentPage-1，计算对应页的起始/结束索引
    const previousPageStartIndex = ($scope.currentPage - 2) * $scope.limitRows;
    const previousPageEndIndex = ($scope.currentPage - 1) * $scope.limitRows;
    
    // 当前页为第一页时直接禁用上一页按钮
    if ($scope.currentPage <= 1) {
        $scope.previousButtonDisabled = true;
        return;
    }

    const previousPageRecords = $scope.error_requests
        .filter(filterByTimeAndStatus)
        .slice(previousPageStartIndex, previousPageEndIndex);

    $scope.previousButtonDisabled = previousPageRecords.length === 0;
}

function checkNextPageContent() {
    // 下一页是currentPage+1，计算对应页的起始/结束索引
    const nextPageStartIndex = $scope.currentPage * $scope.limitRows;
    const nextPageEndIndex = nextPageStartIndex + $scope.limitRows;
    
    // 先计算过滤后的总记录数，判断当前页是否已是最后一页
    const filteredTotal = $scope.error_requests.filter(filterByTimeAndStatus).length;
    const actualMaxPage = Math.ceil(filteredTotal / $scope.limitRows);

    if ($scope.currentPage >= actualMaxPage) {
        $scope.nextButtonDisabled = true;
        return;
    }

    const nextPageRecords = $scope.error_requests
        .filter(filterByTimeAndStatus)
        .slice(nextPageStartIndex, nextPageEndIndex);

    $scope.nextButtonDisabled = nextPageRecords.length === 0;
}

步骤2：更新maxPage变量的逻辑 #

在$watchGroup中加入maxPage的更新逻辑，确保过滤条件变化时最大页码同步更新：

$scope.$watchGroup(['currentPage', 'error_requests', 'filterByTime', 'selectedStatusCode'], function () {
    const filteredTotal = $scope.error_requests.filter(filterByTimeAndStatus).length;
    // 过滤后无数据时默认maxPage为1，避免出现0值
    $scope.maxPage = Math.ceil(filteredTotal / $scope.limitRows) || 1;

    checkPreviousPageContent();
    checkNextPageContent();
});

步骤3：修正分页跳转函数的判断逻辑 #

确保跳转时基于更新后的maxPage，同时跳转后同步检查两个按钮的状态：

$scope.lastPage = function () {
    if ($scope.currentPage !== $scope.maxPage) {
        $scope.currentPage = $scope.maxPage;
        checkNextPageContent();
    }
};

$scope.nextPage = function () {
    if ($scope.currentPage < $scope.maxPage) {
        $scope.currentPage++;
        checkPreviousPageContent();
        checkNextPageContent();
    }
};

$scope.previousPage = function () {
    if ($scope.currentPage > 1) {
        $scope.currentPage--;
        checkPreviousPageContent();
        checkNextPageContent();
    }
};

额外性能优化建议 #

可以将过滤后的记录缓存为$scope变量，避免重复调用filter函数：

function updateFilteredRecords() {
    $scope.filteredRecords = $scope.error_requests.filter(filterByTimeAndStatus);
    $scope.maxPage = Math.ceil($scope.filteredRecords.length / $scope.limitRows) || 1;
}

后续在$watchGroup中调用updateFilteredRecords()，所有分页判断直接使用$scope.filteredRecords即可。

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