FilipQL/0. Laravel Ajax Pagination - Introduction.txt

## 0. Laravel Ajax Pagination - Introduction.txt
Tested with Laravel 5.2 and 5.3. For more details see: http://laraget.com/blog/how-to-create-an-ajax-pagination-using-laravel

Let's say that we have a simple Laravel webiste with articles.
We want to have Ajax pagination on the page that shows (lists) all of the articles (for example, this page can be accessed from www.example.com/articles and it displays paginated lists of article titles.
The following files are described here:

  - resources\views\articles\index.blade.php
  - resources\views\articles\load.blade.php

  - app\Http\Controllers\ArticleController.php

  - app\Http\routes.php (or if you are using Laravel 5.3 in routes/web.php)

## 1. index.blade.php
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Laravel Ajax Pagination</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-9">

                @if (count($articles) > 0)
                    <section class="articles">
                        @include('articles.load')
                    </section>
                @endif

            </div>

            <div class="col-sm-3">
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        $(function() {
            $('body').on('click', '.pagination a', function(e) {
                e.preventDefault();

                $('#load a').css('color', '#dfecf6');
                $('#load').append('<img style="position: absolute; left: 0; top: 0; z-index: 100000;" src="/images/loading.gif" />');
                // MAKE SURE THAT YOU PUT THE CORRECT IMG PATH - For more details see: http://laraget.com/blog/how-to-create-an-ajax-pagination-using-laravel
                var url = $(this).attr('href');
                getArticles(url);
                window.history.pushState("", "", url);
            });

            function getArticles(url) {
                $.ajax({
                    url : url
                }).done(function (data) {
                    $('.articles').html(data);
                }).fail(function () {
                    alert('Articles could not be loaded.');
                });
            }
        });
    </script>
</body>
</html>

## 2. load.blade.php
<div id="load" style="position: relative;">
@foreach($articles as $article)
    <div>
        <h3>
            <a href="{{ action('ArticleController@show', [$article->id]) }}">{{$article->title }}</a>
        </h3>
    </div>
@endforeach
</div>
{{ $articles->links() }}

## 3. ArticleController.php
<?php

namespace App\Http\Controllers;

use App\Article;
use Illuminate\Http\Request;
use App\Http\Requests;

class ArticleController extends Controller
{
    protected $articles;

    public function __construct(Article $articles)
    {
        $this->articles = $articles;
    }


    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        $articles = $this->articles->latest('created_at')->paginate(5);

        if ($request->ajax()) {
            return view('articles.load', ['articles' => $articles])->render();
        }

        return view('articles.index', compact('articles'));
    }
}

## 4. routes.php (or web.php if you are using Laravel 5.3)
Route::resource('articles', 'ArticleController');

// And that’s it. For more details see: http://laraget.com/blog/how-to-create-an-ajax-pagination-using-laravel
	Tested with Laravel 5.2 and 5.3. For more details see: http://laraget.com/blog/how-to-create-an-ajax-pagination-using-laravel

	Let's say that we have a simple Laravel webiste with articles.
	We want to have Ajax pagination on the page that shows (lists) all of the articles (for example, this page can be accessed from www.example.com/articles and it displays paginated lists of article titles.
	The following files are described here:

	- resources\views\articles\index.blade.php
	- resources\views\articles\load.blade.php

	- app\Http\Controllers\ArticleController.php

	- app\Http\routes.php (or if you are using Laravel 5.3 in routes/web.php)
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8">
	<title>Laravel Ajax Pagination</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-sm-9">

	@if (count($articles) > 0)
	<section class="articles">
	@include('articles.load')
	</section>
	@endif

	</div>

	<div class="col-sm-3">
	</div>
	</div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

	<script type="text/javascript">

	$(function() {
	$('body').on('click', '.pagination a', function(e) {
	e.preventDefault();

	$('#load a').css('color', '#dfecf6');
	$('#load').append('<img style="position: absolute; left: 0; top: 0; z-index: 100000;" src="/images/loading.gif" />');
	// MAKE SURE THAT YOU PUT THE CORRECT IMG PATH - For more details see: http://laraget.com/blog/how-to-create-an-ajax-pagination-using-laravel
	var url = $(this).attr('href');
	getArticles(url);
	window.history.pushState("", "", url);
	});

	function getArticles(url) {
	$.ajax({
	url : url
	}).done(function (data) {
	$('.articles').html(data);
	}).fail(function () {
	alert('Articles could not be loaded.');
	});
	}
	});
	</script>
	</body>
	</html>
	<div id="load" style="position: relative;">
	@foreach($articles as $article)
	<div>
	<h3>
	<a href="{{ action('ArticleController@show', [$article->id]) }}">{{$article->title }}</a>
	</h3>
	</div>
	@endforeach
	</div>
	{{ $articles->links() }}
	<?php

	namespace App\Http\Controllers;

	use App\Article;
	use Illuminate\Http\Request;
	use App\Http\Requests;

	class ArticleController extends Controller
	{
	protected $articles;

	public function __construct(Article $articles)
	{
	$this->articles = $articles;
	}


	/**
	* Display a listing of the resource.
	*
	* @return \Illuminate\Http\Response
	*/
	public function index(Request $request)
	{
	$articles = $this->articles->latest('created_at')->paginate(5);

	if ($request->ajax()) {
	return view('articles.load', ['articles' => $articles])->render();
	}

	return view('articles.index', compact('articles'));
	}
	}
	Route::resource('articles', 'ArticleController');

	// And that’s it. For more details see: http://laraget.com/blog/how-to-create-an-ajax-pagination-using-laravel