Laravel Ajax пагинация

Ромчик
0

Пагинация в LaravelДоброго времени суток. В одной из статей «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 создана

Таблица categories, созданная с помощью миграции в Laravel

Переходим ко второму этапу.

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);

}

}

});

&nbsp;

$(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)

Ajax пагинация в Laravel, странийца 1

Давайте перейдем на вторую страницу.

Ajax пагинация в Laravel, страница 2

Все работает.

Вывод.

Мы с вами создали приложение на Laravel, в котором реализовали постраничную навигацию с помощью ajax.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2018 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика