AJAX pagination with Laravel

Question

I have this view called posts.blade.php which gets included in home.blade.php:

<div id="posts">
    @foreach ($posts as $post)
        <div class="list-item clearfix">
            <div class="content">
                <img src="{{ URL::to($post->thumbnail) }}" alt="" />
                <h1>{{{ $post->title }}}</h1>
            </div>
            <div class="score">{{ $post->rating }}</div>
        </div>
    @endforeach
    <div id="pagination">{{{ $posts->links() }}}</div>
</div>

When a user searches for certain posts, the controller's postSearch() function returns a JSON response:

function postSearch() 
{
    $posts = $posts->select(...)->where(...)->orderBy(...)->paginate(5); //Search posts

    return Response::json(View::make('includes.posts', ['posts' => $posts])->render());
}

And jQuery appends the HTML on the #posts div:

$('#search').submit(function(e) {
    e.preventDefault();
    var form = $(this);

    $.post(form.attr('action'), form.serialize(), function(data) {
        $('#posts').html(data);
    });
});

This works perfect. But now when I click on a pagination link, the page reloads and my search results are gone (obvious). How do I paginate these posts? I've read this, this and this article, but I don't understand how to implement it.

Edit

This is my jQuery for the pagination so far:

$('#posts').on('click', '.pagination a', function(e) {
    e.preventDefault();
    var url = $(this).attr('href'),
        page = url.split('page=')[1],
        data = $('#search').serializeArray();

    data.push({page: page}); // Add page variable to post data
    console.log(data);

    $.post($('#search').attr('action'), data, function(data) {
        $('#posts').html(data['posts']);
    });
});

This is data is being send when I click on a pagination link (page 2):

Unfortunately nothing happens, the posts from page 1 keep showing.

Answer 1

I'm not very familiar with pagination in Laravel but judging from the links you listed it doesn't look too hard. This code is untested though...

$('#pagination a').on('click', function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    $.post(url, $('#search').serialize(), function(data){
        $('#posts').html(data);
    });
});

Update

In case the pagination links are wrong (like the were for the OP) you have to build the url by yourself.
Just take the url you want and add ?page=#number to it.

// page being the page number stripped from the original link
var url = $('#search').attr('action')+'?page='+page;

Answer 2

I have the perfect tool for the job. Please check out this repo https://github.com/themightysapien/ajaxtable

Please read the docs it is very easy to use and is specially made for laravel. All you need to do is return your results as following example.

return Response::json(array(
              'data'=> View::make('only_table_row_view', compact('collection')->render(),
              'pagination'=>(string) $collection->links()
              ));

Required files are add

<link rel="stylesheet" href="css/ajaxtable.css">
<script src="js/plugins.js"></script>
$(".yourtable").ajaxtable();

Initialize your ajax url through data-requestUrl attribute in your table. Add a id="paginationWrapper" div in your page where you want your pagination to appear.

If you have any problem run the repo in your local server and see the source for html markups and plugin options.

Answer 3

I am using following js for getting data on href click.

// Your Local url 
var Url = 'laraveltestproject/laravelpagination';

$('#ajaxContent').load("Url");

$('.pagination a').on('click', function(event) {

    event.preventDefault();
    if ($(this).attr('href') != '#') {
        $('#ajaxContent').load($(this).attr('href'));
    }
});

For Complete example you can visit the http://www.tutsway.com/laravel-ajax-pagination-example.php.