0
Пагинация в Laravel с использованием Bootstrap
В этом уроке мы расскажем, как создать простую пагинацию страниц в приложении Laravel. Мы рассмотрим привязку с помощью метода pagination() для отображения результатов в меньших размерах с использованием paginate() и links() функцией.
Интегрировать нумерацию страниц в Laravel очень просто благодаря построителю запросов и Eloquent ORM. Он предлагает удобный и творческий способ отображения результатов базы данных небольшими фрагментами. Пагинация хорошо работает с фреймворком Bootstrap CSS.
Установку и настройку приложения в данном уроке мы рассматривать не будем, дабы не растягивать урок, а сконцентрируемся на теме пагинации страниц в Laravel. Давайте начнем!
Контроллер и маршрут
Запустите команду для создания контроллера сотрудников.
php artisan make:controller EmployeeController
Поместите следующий код в файл app/Http/ControllersEmployeeController.php .
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Employee;
class EmployeeController extends Controller
{
public function getData(){
$employeeData = Employee::all();
return view('home', compact('employeeData'));
}
}
Создать маршрут
Перейдите к routes/web.php , чтобы включить следующий код, чтобы определить маршрут и привязать к нему контроллер.
use App\Http\Controllers\ EmployeeController;
Route::get('/', [EmployeeController::class, 'getData']);
Рендеринг записей в представлении
Сначала создайте блейд-файл resources/views/home.blade.php и поместите в него следующий код для отображения записей сотрудников в представлении Laravel с использованием компонента Bootstrap Table.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Laravel Pagination Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<table class="table table-bordered mb-5">
<thead>
<tr class="table-success">
<th scope="col">#</th>
<th scope="col">First name</th>
<th scope="col">Last name</th>
<th scope="col">Email</th>
<th scope="col">DOB</th>
</tr>
</thead>
<tbody>
@foreach($employees as $data)
<tr>
<th scope="row">{{ $data->id }}</th>
<td>{{ $data->firstname }}</td>
<td>{{ $data->lastname }}</td>
<td>{{ $data->email }}</td>
<td>{{ $data->dob }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</body>
</html>
Используйте пагинацию в Laravel
Пагинация страниц — это способ показать большие данные в небольшой части. Пагинация в Laravel очень проста в использовании; она интегрирована с построителем запросов(QueryBuilder) и Eloquent ORM. Пагинация в Laravel автоматически покрывает лимит и смещение.
Реализация нумерации страниц в laravel проста: добавьте функцию paginate laravel в функцию getData() внутри класса WorkerController. Удалите all() и используйте paginate() , он принимает число в качестве аргумента, это число определяет количество результатов, которые будут показаны пользователю.
// app > http > controllers > EmployeeController.php
class EmployeeController extends Controller {
public function getData(){
$employees = Employee::paginate(8);
return view('home', compact('employees'));
}
}
Чтобы отобразить компонент нумерации страниц в представлении, нам нужно добавить следующий код в файл home.blade.php под компонентом таблицы. Поскольку пагинация страниц в Laravel хорошо сочетается с Bootstrap 4, нам не нужно беспокоиться о пользовательском интерфейсе нумерации страниц.
<div class="d-flex justify-content-center">
{!! $employees->links() !!}
</div>
Вот окончательный файл home.blade.php .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Laravel Pagination Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<table class="table table-bordered mb-5">
<thead>
<tr class="table-success">
<th scope="col">#</th>
<th scope="col">First name</th>
<th scope="col">Last name</th>
<th scope="col">Email</th>
<th scope="col">DOB</th>
</tr>
</thead>
<tbody>
@foreach($employees as $data)
<tr>
<th scope="row">{{ $data->id }}</th>
<td>{{ $data->firstname }}</td>
<td>{{ $data->lastname }}</td>
<td>{{ $data->email }}</td>
<td>{{ $data->dob }}</td>
</tr>
@endforeach
</tbody>
</table>
{{-- Pagination --}}
<div class="d-flex justify-content-center">
{!! $employees->links() !!}
</div>
</div>
</body>
</html>
Пользовательский параметр пагинации страниц Laravel
Мы создали простую пагиацию страниц, которая отображает несколько страниц результатов и создает примерно такой URL-адрес. По сути, он добавляет файл ?page=3.
Добавить параметр к нумерации страниц
Мы можем просто добавить дополнительный параметр к URL-адресу разбивки на страницы, используя следующий код.
{!! $employees->appends(['sort' => 'department'])->links() !!}
Более того, вам необходимо импортировать и определить useBootstrap() внутри функции загрузки в файле app/Providers/AppServiceProvider.php :
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
//
}
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Paginator::useBootstrap();
}
}
Преобразование результатов пагинации в JSON
Классы результатов пагинатора Laravel реализуют контракт интерфейса Illuminate\Contracts\Support\Jsonable и предоставляют метод toJson. Преобразовать результаты разбивки на страницы в JSON очень просто. Вы также можете преобразовать экземпляр пагинатора в JSON, вернув его из маршрута или действия контроллера.
Откройте файл routes/web.php и поместите следующий маршрут с функцией разбиения на страницы.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EmployeeController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', [EmployeeController::class, 'getData']);
Route::get('/convert-to-json', function () {
return App\Employee::paginate(5);
});
Вы можете получить данные JSON разбивки на страницы по URL-адресу:
http://127.0.0.1:8000/convert-to-json
{
"current_page":1,
"data":[
{
"id":1,
"firstname":"Hardy",
"lastname":"Kuhlman",
"email":"vcummerata@yahoo.com",
"dob":"Thu-01-70"
},
{
"id":2,
"firstname":"Missouri",
"lastname":"Gaylord",
"email":"daniel.gene@yahoo.com",
"dob":"Thu-01-70"
},
{
"id":3,
"firstname":"Kaela",
"lastname":"O'Hara",
"email":"eparker@yahoo.com",
"dob":"Thu-01-70"
},
{
"id":4,
"firstname":"George",
"lastname":"O'Kon",
"email":"wmurazik@purdy.biz",
"dob":"Thu-01-70"
},
{
"id":5,
"firstname":"Chaim",
"lastname":"Jerde",
"email":"jerome89@collins.com",
"dob":"Thu-01-70"
}
],
"first_page_url":"http:\/\/127.0.0.1:8000\/home?page=1",
"from":1,
"last_page":100,
"last_page_url":"http:\/\/127.0.0.1:8000\/home?page=100",
"next_page_url":"http:\/\/127.0.0.1:8000\/home?page=2",
"path":"http:\/\/127.0.0.1:8000\/home",
"per_page":5,
"prev_page_url":null,
"to":5,
"total":500
}
Запустите приложение Laravel
Выполните следующую команду, чтобы запустить демонстрационный проект пагинации страниц Laravel.
php artisan serve
Проверьте приложение по адресу http://127.0.0.1:8000 .
Заключение
Наконец, мы завершили руководство по разбивке на страницы Laravel на примере. В этом уроке мы научились работать с пагинацией страниц в Laravel.
Мы узнали о создании контроллера, файла представления маршрута и блейда, и, самое главное, мы научились использовать компонент пагинации страниц в laravel.
Мы поняли различные другие методы, такие как передача пользовательских параметров с разбивкой на страницы и преобразование результатов разбивки на страницы в JSON.
