How to do ajax pagination in cakephp 3.x

Need Help
1

I am trying to implement ajax pagination in cakephp 3.x. But nothing works. Please help.

In cakephp 2, i have used Just JS Buffer too implement ajax pagination. In cakephp 3 JS has been removed.

Pl someone tell me what to do for this…

2

Unfortunately I don’t have an example right now (perhaps someone else can offer one), but the theory goes like this:

You need to create a controller action for the page with the pagination content and render it as an element when it’s requested via ajax.
This element should be included in the view file of this action and it should contain the paginator helper.

So your action should behave in two different ways: One, render the view with the element normally on a normal request, and two, render only the element on an ajax request.

Then, add a jquery click event that fires when a link within the paginator is clicked, which fetches the html data from the links href attribute via ajax and inserts it into the container with the pagination content.

So the basic mechanics of it are fairly simple: You just click a link from the paginator helper, and it replaces the whole content block (including the paginator helper) with the content of the target page.

Since the pagination links get recreated every time, it’s important that the on click event happens through delegation, for instance like so:

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

    var target = $(this).attr('href');

    $.get(target, function(data) {
        $('#container').html( data );
    }, 'html');
});

You should be able to find out how to accomplish each step with some help from Google and the CakePHP docs. Feel free to ask if you get stuck somewhere!

3

Hi ali,

Thanks for your help… Here is my complete code for ajax pagination.

$(document).ready(function () {
$(".pagination a").bind(“click”, function (event) {
if(!$(this).attr(‘href’))
return false;
$.ajax({
dataType:“html”,
evalScripts:true,
success:function (data, textStatus) {$("#container").html(data);},
url:$(this).attr(‘href’)});
return false;
});
});

4

Yeah, that won’t really work if the pagination is within #container (or rather, it will only work once). You’ll have to use Delegation as in my example.

5

Hi ali,

Your code works perfect. Thanks.

$(document).on(‘click’, ‘.pagination a’, function() {
var target = $(this).attr(‘href’);
if(!target)
return false;
$.get(target, function(data) {
$(’#content’).html( data );
}, ‘html’);
return false;
});

1 Like