Chúng ta sẽ sử dụng hàm Paginate() có sẵn trong Laravel để tiến hành phân trang danh sách Sản phẩm. Hỗ trợ cho các Eloquent ModelQuery Builder.

Step 1: hiệu chỉnh action index() của SanPhamController:

  • Hiệu chỉnh file app\Http\Controllers\SanPhamController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\SanPham;
use App\Loai;
use Session;
use Storage;
use Barryvdh\DomPDF\Facade as PDF;

class SanPhamController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        // Sử dụng Eloquent Model để truy vấn dữ liệu
        // $ds_sanpham = SanPham::all(); // SELECT * FROM sanpham

        // Sử dụng Eloquennt Model phân trang
        // Mỗi trang có 5 mẫu tin
        $ds_sanpham = SanPham::paginate(5); // SELECT * FROM sanpham LIMIT 0,5

        // Đường dẫn đến view được quy định như sau: <FolderName>.<ViewName>
        // Mặc định đường dẫn gốc của method view() là thư mục `resources/views`
        // Hiển thị view `backend.sanpham.index`
        return view('backend.sanpham.index')
            // với dữ liệu truyền từ Controller qua View, được đặt tên là `danhsachsanpham`
            ->with('danhsachsanpham', $ds_sanpham);
    }
    ...
}

Step 2: hiệu chỉnh giao diện view sanpham.blade.index

  • Hiệu chỉnh file: `resources\views\backend\sanpham\index.blade.php`
@extends('backend.layout.master')

@section('title')
Danh sách Sản phẩm
@endsection

@section('feature-title')
Danh sách Sản phẩm   
@endsection

@section('feature-description')
Danh sách các Sản phẩm có trong Hệ thống. Bạn có thể CRUD!
@endsection

@section('content')
<a href="{{ route('backend.sanpham.create') }}" class="btn btn-primary">Thêm mới Sản phẩm</a>
<a href="{{ route('backend.sanpham.print') }}" class="btn btn-success">In danh sách Sản phẩm</a>
<a href="{{ route('backend.sanpham.pdf') }}" class="btn btn-danger">Xuất PDF Sản phẩm</a>
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>STT</th>
            <th>Hình</th>
            <th>Mã sản phẩm</th>
            <th>Giá gốc</th>
            <th>Loại sản phẩm</th>
            <th>Sửa</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $stt = 1;
        ?>
        @foreach($danhsachsanpham as $sp)
        <tr>
            <td>{{ $loop->index + 1 }}</td>
            <td>
                <img src="{{ asset('storage/photos/' . $sp->sp_hinh) }}" class="sanpham-thumbnail" />
            </td>
            <td>{{ $sp->sp_ten }}</td>
            <td>{{ $sp->sp_giaGoc }}</td>
            <td>{{ $sp->loaisanpham->l_ten }}</td>
            <td>
                <a href="{{ route('backend.sanpham.edit', ['id' => $sp->sp_ma]) }}" class="btn btn-success">Sửa</a>
                <form class="d-inline" method="post" action="{{ route('backend.sanpham.destroy', ['id' => $sp->sp_ma]) }}">
                    {{ csrf_field() }}
                    <input type="hidden" name="_method" value="DELETE" />
                    <button class="btn btn-danger">Xóa</button>
                </form>
            </td>
        </tr>
        <?php
        $stt++;
        ?>
        @endforeach
    </tbody>
</table>
{{ $danhsachsanpham->links() }}
@endsection

Step 3: sử dụng giao diện Bootstrap 4 để làm Phân trang đẹp hơn

  • Chạy câu lệnh sau để chép file giao diện dành riêng cho Bootstrap 4 (đã được Laravel tích hợp sẵn)
php artisan vendor:publish --tag=laravel-pagination
  • Laravel sẽ tạo cho bạn giao diện dành cho Phân trang nằm trong thư mục resources/views/vendor/pagination
resources
└───views
    └───vendor
        └───pagination
                bootstrap-4.blade.php             <- giao diện phân trang Bootstrap 4
                default.blade.php                 <- giao diện phân trang mặc định 
                semantic-ui.blade.php             <- giao diện phân trang Semantic
                simple-bootstrap-4.blade.php      <- giao diện phân trang Simple Bootstrap 4
                simple-default.blade.php          <- giao diện phân trang Simple default

Step 4: cấu hình sử dụng giao diện Bootstrap 4 làm giao diện phân trang mặc định

  • Hiệu chỉnh file app\Providers\AppServiceProvider.php
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema; //Fix 1071 error
use Illuminate\Pagination\Paginator;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Schema::defaultStringLength(191); //Mặc định độ dài của chuỗi là 191 ký tự

        // Sử dụng giao diện Bootstrap 4 để hiển thị các LINK phân trang (pagination link)
        Paginator::defaultView('vendor.pagination.bootstrap-4');
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}