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 Model và Query 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()
{
//
}
}
|