前端分頁組件實現

// 分頁控制器
angular.module('paginationApp', [])
.controller('PaginationCtrl', function($scope) {
  // 模擬從阿里云API獲取的數據
  $scope.dataItems = [...]; 
  
  // 分頁配置
  $scope.pagination = {
    currentPage: 1,
    itemsPerPage: 10,
    maxSize: 5
  };

  // 計算分頁數據
  $scope.$watch('pagination.currentPage', function() {
    var begin = (($scope.pagination.currentPage - 1) * $scope.pagination.itemsPerPage);
    var end = begin + $scope.pagination.itemsPerPage;
    $scope.pagedItems = $scope.dataItems.slice(begin, end);
  });
});

// 分頁指令
.directive('paginationControls', function() {
  return {
    restrict: 'E',
    template: `
      <ul class="pagination">
        <li ng-class="{disabled: pagination.currentPage == 1}">
          <a ng-click="setPage(1)">?</a>
        </li>
        <li ng-repeat="page in pages" 
            ng-class="{active: page == pagination.currentPage}">
          <a ng-click="setPage(page)">{{page}}</a>
        </li>
        <li ng-class="{disabled: pagination.currentPage == totalPages}">
          <a ng-click="setPage(totalPages)">?</a>
        </li>
      </ul>
    `,
    controller: function($scope) {
      $scope.$watch('pagination', function() {
        $scope.totalPages = Math.ceil($scope.dataItems.length / $scope.pagination.itemsPerPage);
        $scope.pages = [];
        var start = Math.max(1, $scope.pagination.currentPage - 2);
        var end = Math.min($scope.totalPages, start + 4);
        
        for(var i=start; i<=end; i++) {
          $scope.pages.push(i);
        }
      }, true);
      
      $scope.setPage = function(page) {
        $scope.pagination.currentPage = page;
      };
    }
  };
});

后端分頁接口示例（Node.js + PolarDB）

// 阿里云環境下的分頁API
app.get('/api/data', async (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const limit = parseInt(req.query.limit) || 10;
  
  // 使用阿里云PolarDB分頁查詢
  const result = await db.query(`
    SELECT * FROM big_data_table
    ORDER BY create_time DESC
    LIMIT ${limit} OFFSET ${(page - 1) * limit}
  `);
  
  // 獲取總數
  const total = await db.query(
    'SELECT COUNT(*) AS total FROM big_data_table'
  );
  
  res.json({
    data: result.rows,
    pagination: {
      currentPage: page,
      totalPages: Math.ceil(total.rows[0].total / limit),
      totalItems: total.rows[0].total
    }
  });
});