WordPress Pagination not working with AJAX

Question

I'm loading some posts though AJAX and my WordPress pagination is using the following function to calculate paging:

get_pagenum_link($paged - 1)

The issue is that the pagination is getting created through AJAX so it's making this link look like: http://localhost:1234/vendor_new/wp-admin/admin-ajax.php

However the actual URL that I'm trying to achieve is for this: http://localhost:1234/vendor_new/display-vendor-results

Is there a way to use this function with AJAX and still get the correct URL for paging?

Answer 1

This is actually hard to answer without specific details of what and how is being called. I bet you want to implement that in some kind of endless-sroll website, right?

Your best bet is to get via AJAX the paginated page itself, and grab the related markup. Assume you have a post http://www.yourdomain.com/post-1/

I guess you want to grab the pagination of the next page, therefore you need something like this:

$( "#pagination" ).load( "http://www.yourdomain.com/post-1/page/2 #pagination" );

This can easily work with get_next_posts_link() instead of get_pagenum_link().

Now, in order for your AJAX call to be dynamic, you could something like:

$( "#pagination" ).load( $("#pagination a").attr('href') + " #pagination" );

This will grab the next page's link from your current page, and load its pagination markup in place of the old.

It's also doable with get_pagenum_link() however you'd need to change the $("#pagination a").attr('href') selector appropriately, in order to get the next page (since you'd have more than one a elements inside #pagination

Answer 2

I can think of three options for you:

1. To write your own version of get_pagenum_link() that would allow you to specify the base URL
2. To overwrite the $_SERVER['REQUEST_URI'] variable while you call get_pagenum_link()
3. To call the paginate_links() function, return the whole pagination's HTML and then process that with JS to only take the prev/next links.

#1 Custom version of get_pagenum_link()

Pros: you would have to change a small amount of your current code - basically just change the name of the function you're calling and pass an extra argument.

Cons: if the function changes in the future(unlikely, but possible), you'd have to adjust your function as well.

I will only post the relevant code of the custom function - you can assume everything else can be left the way it's in the core version.

function my_get_pagenum_link( $pagenum = 1, $escape = true, $base = null ) {
    global $wp_rewrite;

    $pagenum = (int) $pagenum;

    $request = $base ? remove_query_arg( 'paged', $base ) : remove_query_arg( 'paged' );

So in this case, we have one more argument that allows us to specify a base URL - it would be up to you to either hard-code the URL(not a good idea), or dynamically generate it. Here's how your code that handles the AJAX request would change:

my_get_pagenum_link( $paged - 1, true, 'http://localhost:1234/vendor_new/display-vendor-results' );

And that's about it for this solution.

---

#2 overwrite the $_SERVER['REQUEST_URI'] variable

Pros: Rather easy to implement, should be future-proof.

Cons: Might have side effects(in theory it shouldn't, but you never know); you might have to edit your JS code.

You can overwrite it with a value that you get on the back-end, or with a value that you pass with your AJAX request(so in your AJAX request, you can have a parameter for instance base that would be something like window.location.pathname + window.location.search). Difference is that in the second case, your JS would work from any page(if in the future you end-up having multiple locations use the same AJAX handler).

I will post the code that overwrites the variable and then restores it.

// Static base - making it dynamic is highly recommended
$base = '/vendor_new/display-vendor-results';
$orig_req_uri = $_SERVER['REQUEST_URI'];

// Overwrite the REQUEST_URI variable
$_SERVER['REQUEST_URI'] = $base;

// Get the pagination link
get_pagenum_link( $paged - 1 );

// Restore the original REQUEST_URI - in case anything else would resort on it
$_SERVER['REQUEST_URI'] = $orig_req_uri;

What happens here is that we simply override the REQUEST_URI variable with our own - this way we fool the add_query_arg function into thinking, that we're on the /vendor_new/display-vendor-results page and not on /wp-admin/admin-ajax.php

---

#3 Use paginate_links() and manipulate the HTML with JS

Pros: Can't really think of any at the moment.

Cons: You would have to adjust both your PHP and your JavaScript code.

Here is the idea: you use paginate_links() with it's arguments to create all of the pagination links(well - at least four of them - prev/next and first/last). Then you pass all of that HTML as an argument in your response(if you're using JSON - or as part of the response if you're just returning the HTML).

PHP code:

global $wp_rewrite, $wp_query;

// Again - hard coded, you should make it dynamic though
$base = trailingslashit( 'http://localhost:1234/vendor_new/display-vendor-results' ) . "{$wp_rewrite->pagination_base}/%#%/";
$html = '<div class="mypagination">' . paginate_links( array(
    'base' => $base,
    'format' => '?paged=%#%',
    'current' => max( 1, $paged ),
    'total' => $wp_query->max_num_pages,
    'mid_size' => 0,
    'end_size' => 1,
) ) . '</div>';

JS code(it's supposed to be inside of your AJAX success callback):

// the html variable is supposed to hold the AJAX response
// either just the pagination or the whole response
jQuery( html ).find('.mypagination > *:not(.page-numbers.next,.page-numbers.prev)').remove();

What happens here is that we find all elements that are inside the <div class="mypagination">, except the prev/next links and we remove them.

---

To wrap it up:

The easiest solution is probably #2, but if someone for some reason needs to know that the current page is admin-ajax.php while you are generating the links, then you might have an issue. The chances are that no one would even notice, since it would be your code that is running and any functions that could be attached to filters should also think that they are on the page you need(otherwise they might mess something up).

PS: If it was up to me, I was going to always use the paginate_links() function and display the page numbers on the front-end. I would then use the same function to generate the updated HTML in the AJAX handler.