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.
