How to create ajax pagination in laravel 5

Published Date: 25-Nov-2017 | Tags: Laravel 5.5  Ajax  

This tutorial I want to show you how to create ajax pagination with laravel 5 and bootstrap 3 and 4.

First you have to create an ajax function with jquery or javascript.

function ajaxLoad(url, content) {
    // content is an id of div. And it is used for showing the updated data after deleting.
    // if you not specify, it will use div with id "content"
    content = typeof content !== 'undefined' ? content : 'content';
    $('.loading').show();
    $.ajax({
        type: "GET",
        url: url,       // url is the url you define in laravel delete route
        contentType: false,
        success: function (data) {
            $("#" + content).html(data);
            $('.loading').hide();
        },
        error: function (xhr, status, error) {
            alert(xhr.responseText);
        }
    });
}

Then if you use laravel with bootstrap 3 css pagination, you can use this.

$(document).on('click', '.pagination a', function (event) {
    event.preventDefault();
    ajaxLoad($(this).attr('href'));
});

And if you use laravel with bootstrap 4 css pagination, you can use this.

$(document).on('click', 'a.page-link', function (event) {
    event.preventDefault();
    ajaxLoad($(this).attr('href'));
});

Note: You can use any id or class to make it works, no need to stick with my code. sometime we have different thinking.

 

Hope you do it.



Related Posts

© 2018 All Rights Reserved.