Как работает разбиение на страницы в системе API (интерфейс — angular2, а сервер — laravel5.4)?

Вот как создать пользовательский интерфейс Angular с разбиением на страницы, который работает с родной системой разбиения на страницы Laravel:

Во-первых, чтобы помочь, создайте класс Booking и PaginatedBooking (мои заказы просты и имеют только описание — настраивайте по мере необходимости):

booking.model.ts:

export class Booking {
  id: number;
  description: string;
}

paginated-booking.model.ts: представляет данные разбиения на страницы, возвращаемые Laravel

import { Booking } from './booking.model'

export class PaginatedBooking {
  current_page: number;
  data: Booking[];
  from: number;
  last_page: number;
  next_page_url: string;
  path: string;
  per_page: number;
  prev_page_url: string;
  to: number;
  total: number;
}

Затем создайте свой сервис для получения данных бронирования с разбивкой на страницы. Добавьте функцию getBookingsAtUrl(url) — мы будем использовать ее позже, чтобы запрашивать определенные наборы данных разбиения на страницы из Laravel, когда вы нажимаете кнопки «предыдущий/следующий»:

booking.service.ts

export class BookingService {
    private bookingUrl: string = '/api/bookings'
    constructor(private http: Http) { }

    getBookings(): Promise<PaginatedBooking>{
        return this.http.get(this.bookingUrl)
        .toPromise()
        .then(response => response.json() as PaginatedBooking)
        .catch(this.handleError);
    }

    getBookingsAtUrl(url: string): Promise<PaginatedBooking>{
        return this.http.get(url)
        .toPromise()
        .then(response => response.json() as PaginatedBooking)
        .catch(this.handleError);
    }

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }
}

В своем компоненте внедрите ngOnInit(), чтобы получить исходные данные о бронировании. Затем реализуйте функцию getPrev() и функцию nextPage(), которые вызывают службу Bookings при нажатии этих кнопок:

booking.component.ts:

export class BookingComponent implements OnInit {
  bookings:PaginatedBooking;
  constructor(private service: NativeBookingService) { }

  ngOnInit() {
    this.service.getBookings().then(bookings=>this.bookings = bookings);
  }

  prevPage() {
    this.service.getBookingsAtUrl(this.bookings.prev_page_url).then(bookings=>this.bookings = bookings);
  }

  nextPage() {
    this.service.getBookingsAtUrl(this.bookings.next_page_url).then(bookings=>this.bookings = bookings);
  }
}

Наконец, ваш шаблон компонента:

booking.component.html:

<div *ngIf="bookings">
  <ul>
    <li *ngFor="let booking of bookings.data">{{booking.description}}</li>
  </ul>
  <p>Showing booking {{bookings.from}} to {{bookings.to}} of {{bookings.total}}</p>
  <p>Page {{bookings.current_page}} of {{bookings.last_page}}</p>
  <button (click)="prevPage()" [disabled]="!bookings.prev_page_url" >Prev</button>
  <button (click)="nextPage()" [disabled]="!bookings.next_page_url">Next</button> 
</div>

И это должно сделать это. Я опустил некоторые импорты для краткости. Настройте свой шаблон по мере необходимости. У меня есть пример проекта, который демонстрирует, как все это объединяется, но обратите внимание, что мои файлы Angular названы немного по-другому, и я добавил наивное состояние загрузки:

https://github.com/SpaceFozzy/laravel-angular-pagination

И вы можете посмотреть живую демонстрацию здесь.

Удачи!

Классы результатов разбивки на страницы Laravel реализуют контракт интерфейса Illuminate\Contracts\Support\Jsonable и предоставляют метод toJson, поэтому очень легко преобразовать результаты разбивки на страницы в JSON. Вы можете просто вернуться из контроллера.

public function index()
{
   $bookings = Booking::where('is_delete', 0)
            ->paginate(15);

   return $bookings;
}

И результат должен быть примерно таким

{
   "total": 50,
   "per_page": 15,
   "current_page": 1,
   "last_page": 4,
   "next_page_url": "http://example.app?page=2",
   "prev_page_url": null,
   "from": 1,
   "to": 15,
   "data":[
        {
            // Result Object
        },
        {
            // Result Object
        }
   ]
}

И вы просто можете реализовать процесс пагинации во внешнем интерфейсе.