Laravel Ajax пагинация
Доброго времени суток. В одной из статей «Laravel пагинация» мы рассмотрели как работать с постраничной навигацией в Laravel. А в данной статье мы рассмотрим, как реализовать ajax пагинацию в Laravel. Будем использовать jQuery Ajax. Что такое ajax? Ajax – это технология построения интерактивных веб-приложений, заключающаяся в асинхронном обмене данных с сервером. Благодаря ajax мы увеличиваем скорость отображения страниц. И так, приступим…
Разработку нашего приложения построим по этапам. Я не буду рассматривать установку и настройку Laravel.
1. Этап. Создание таблицы на основе миграции
Давайте создадим миграцию, которая будет создавать таблицу categories, в которой мы будем хранить список категорий. Для создания миграции выполните команду:
php artisan make:migration create_categories_table
Миграция создана. Давайте отредактируем ее:
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateCategoriesTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('categories', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('categories'); } }
Теперь запустим миграцию
php artisan migrate
Таблица categories создана
Переходим ко второму этапу.
2. Этап. Создание модели.
Создадим модель для работы с нашей таблицей categories. Для этого выполним следующую команду:
php artisan make:model Category
Модель создана, давайте опишем ее:
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Category extends Model { protected $table = 'categories'; protected $fillable = [ 'name', ]; }
Модель готова. Переходим к третьему этапу.
3. Этап. Создание контроллера.
Давайте создадим контроллер CategoryController для выполним следующую artisan команду:
php artisan make:controller CategoryController
Контроллер создан. Давайте в нем создадим один метод:
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Category; class CategoryController extends Controller { public function getCategory(Request $request) { $categories = Category::paginate(5); if ($request->ajax()) { return view('category', compact('categories')); } return view('category_list',compact('categories')); } }
Отлично контроллер создан. Переходим к четвертому этапу
4. Этап. Создание представлений
Давайте создадим два представления category_list.blade.php и category.blade.php
В представление category_list.blade.php поместим следующий код:
<!DOCTYPE html> <html> <head> <title>Laravel AJAX пагинация</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <div class="container"> <h1>Laravel AJAX пагинация</h1> <div id="category_wrap"> @include('category') </div> </div> <script type="text/javascript"> $(window).on('hashchange', function() { if (window.location.hash) { var page = window.location.hash.replace('#', ''); if (page == Number.NaN || page <= 0) { return false; }else{ getData(page); } } }); $(document).ready(function() { $(document).on('click', '.pagination a',function(event) { event.preventDefault(); $('li').removeClass('active'); $(this).parent('li').addClass('active'); var myurl = $(this).attr('href'); var page=$(this).attr('href').split('page=')[1]; getData(page); }); }); function getData(page){ $.ajax( { url: '?page=' + page, type: "get", datatype: "html" }) .done(function(data) { $("#category_wrap").empty().html(data); location.hash = page; }) .fail(function(jqXHR, ajaxOptions, thrownError) { alert('No response from server'); }); } </script> </body> </html>
А в представление category.blade.php поместим:
<table class="table table-bordered"> <thead> <tr> <th width="100px">ID</th> <th>Название</th> </tr> </thead> <tbody> @foreach ($categories as $cat) <tr> <td>{{ $cat->id }}</td> <td>{{ $cat->name }}</td> </tr> @endforeach </tbody> </table> {!! $categories->render() !!}
Отлично осталось только добавить роут.
5. Этап. Добавление роута
Открываем файл routes/web.php и добавляем в него роут:
Route::get('pagination',array('as'=>'ajax.pagination','uses'=>'CategoryController@getCategory'));
Все. Приступаем к тестированию, но перед этим не забудьте добавим данные в таблицу.
Переходим <домен>/pagination (в моем случае http://test.loc/pagination)
Давайте перейдем на вторую страницу.
Все работает.
Вывод.
Мы с вами создали приложение на Laravel, в котором реализовали постраничную навигацию с помощью ajax.