基于Laravel 5后端的Angular 5自定义分页实现问询

嘿，我来帮你搞定这个Angular 5+Laravel 5的自定义分页需求！咱们一步步来实现你要的动态页码效果～

1. 核心逻辑梳理 #

先明确你要的分页规则：

• 固定显示5个连续页码
• 总页数为7时，初始（当前页1）显示 1 | 2 | 3 | 4 | 5
• 点击第3页后，切换为 3 | 4 | 5 | 6 | 7
• 如果总页数超过7，比如10页：当前页4时显示4|5|6|7|8，当前页8时显示6|7|8|9|10

2. Angular 5 前端：完善createRange方法 #

首先在product.component.ts里维护关键变量，然后补全页码生成逻辑：

// 组件内的核心变量
currentPage: number = 1;
totalPages: number;
pageRange: number[];
products: any[];

// 完善后的createRange方法
createRange(): void {
  const displayCount = 5; // 固定显示5个页码
  let startPage: number;
  let endPage: number;

  if (this.totalPages <= displayCount) {
    // 总页数不足5，直接显示全部页码
    startPage = 1;
    endPage = this.totalPages;
  } else {
    const maxEndPage = this.currentPage + (displayCount - 1);
    if (maxEndPage >= this.totalPages) {
      // 当前页往后数4页超出总页数，显示最后5个页码
      endPage = this.totalPages;
      startPage = this.totalPages - (displayCount - 1);
    } else {
      // 当前页往后有足够页码，显示当前页到当前页+4
      startPage = this.currentPage;
      endPage = maxEndPage;
    }
  }

  // 生成最终的页码数组
  this.pageRange = [];
  for (let i = startPage; i <= endPage; i++) {
    this.pageRange.push(i);
  }
}

3. Angular 模板渲染分页按钮 #

在product.component.html里添加分页UI，绑定点击事件和激活状态：

<div class="pagination-container">
  <!-- 上一页按钮 -->
  <button 
    (click)="goToPage(currentPage - 1)" 
    [disabled]="currentPage === 1"
    class="page-btn">
    上一页
  </button>

  <!-- 动态生成的页码按钮 -->
  <button 
    *ngFor="let page of pageRange"
    (click)="goToPage(page)"
    [class.active]="page === currentPage"
    class="page-btn">
    {{ page }}
  </button>

  <!-- 下一页按钮 -->
  <button 
    (click)="goToPage(currentPage + 1)" 
    [disabled]="currentPage === totalPages"
    class="page-btn">
    下一页
  </button>
</div>

可以加一点基础样式优化体验：

.pagination-container {
  margin: 20px 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.page-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  background: white;
}

.page-btn.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.page-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

4. Laravel 5 后端：返回分页数据 #

利用Laravel自带的分页功能，在控制器里返回包含总页数的JSON数据：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Product;

class ProductController extends Controller
{
    public function index(Request $request)
    {
        $perPage = $request->input('per_page', 10); // 每页默认10条
        $products = Product::paginate($perPage);

        return response()->json([
            'data' => $products->items(),
            'current_page' => $products->currentPage(),
            'total_pages' => $products->lastPage(),
            'per_page' => $products->perPage(),
            'total' => $products->total()
        ]);
    }
}

5. 前后端联动：加载分页数据 #

在Angular的产品服务中封装接口调用，然后在组件里实现页面切换逻辑：

产品服务（product.service.ts） #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private apiUrl = '/api/products';

  constructor(private http: HttpClient) { }

  getProducts(page: number, perPage: number = 10): Observable<any> {
    return this.http.get(`${this.apiUrl}?page=${page}&per_page=${perPage}`);
  }
}

组件内的页面切换逻辑 #

// 在product.component.ts中添加
constructor(private productService: ProductService) { }

ngOnInit(): void {
  this.loadProducts();
}

loadProducts(): void {
  this.productService.getProducts(this.currentPage).subscribe(response => {
    this.products = response.data;
    this.totalPages = response.total_pages;
    this.currentPage = response.current_page;
    this.createRange(); // 加载数据后生成页码范围
  });
}

goToPage(page: number): void {
  // 防止页码越界
  if (page < 1 || page > this.totalPages) return;
  this.currentPage = page;
  this.loadProducts(); // 切换页面并重新加载数据
}

测试验证 #

• 总页数7，初始页1：pageRange为[1,2,3,4,5]，符合需求
• 点击第3页：pageRange变为[3,4,5,6,7]，完全匹配你的要求
• 总页数10，当前页8：pageRange为[6,7,8,9,10]，逻辑正常

内容的提问来源于stack exchange，提问作者Niladri Banerjee - Uttarpara