Пример пагинации в Laravel с использованием Bootstrap

Время на прочтение статьи
На чтение6 мин
Дата обновления статьи
Обновлено8 месяцев назад
Просмотров статьи
Просмотров

В этом уроке мы расскажем, как создать простую пагинацию страниц в приложении 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>

Пагинация в примере Laravel

Вот окончательный файл 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.

#Laravel