PHP Pagination Next button in existing Code

Question

I've been following a pretty in depth tutorial on PHP pagination using Ajax and JQuery and I'm trying to modify it in such a way that I can show a next button in the pagination tabs.

This is the code I use to generate the pagination bar:

$results = mysqli_query($connecDB,"SELECT COUNT(*) FROM paginate");
$get_total_rows = mysqli_fetch_array($results); //total records
$pages = ceil($get_total_rows[0]/$item_per_page);   

//create pagination
if($pages > 1)
{
    $pagination = '';
    $pagination .= '<ul class="paginate">';
    for($i = 1; $i<=$pages; $i++)
    {
        $pagination .= '<li><a href="#" class="paginate_click" id="'.$i.'-page">'.$i.'</a></li>';
    }

    $pagination .= '<li><a href="#" class="paginate_click" name="nxt" >>></a></li>';//Next
    $pagination .= '</ul>';
}

Following this I then wait until the document is ready and run this script:

$(document).ready(function() {
    $("#results").load("fetch_pages.php", {'page':0}, function() {
        $("#1-page").addClass('active');
    }); 

    $(".paginate_click").click(function (e) {
        $("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
        var clicked_id = $(this).attr("id").split("-"); 
        var page_num = parseInt(clicked_id[0]); 
        $('.paginate_click').removeClass('active'); 
        $("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){    
        });
        $(this).addClass('active'); 
        return false; 
    }); 
});

This is the html:

<body>
<div id="results"></div>
<?php echo $pagination; ?>
</body>

It then outputs a list of results and a pagination bar below them and it is working perfectly. The issue I'm having is how I could include a "Next" button? I'm currently working on this so any new code I try I'll post into this question. Would appreciate any help.

It looks like you have the next button..Do you mean how do you handle the click event for that button? — silversunhunter
– silversunhunter, Commented Nov 17, 2014 at 17:02
Sorry, I forgot I'd left that in there, I suppose so, I was trying a few different things. I thought If I generated the button at the end of the pagination list when the page loads and then somehow update the id to be the next page based on the current page the user is on, I guess I'm not sure how exactly I could do that. — Javacadabra
– Javacadabra, Commented Nov 17, 2014 at 17:04

silversunhunter · Accepted Answer · 2014-11-17 17:15:51Z

1

Based on your comment:

First give the <a> some data when you create it in php. I assume you know what page they are on in this portion of your script

<a href="#" data-currentPageId=".$currentPageId." class="next"></a>

//or just create the next page link based on the id
$nexPage = 'http://nextpagebasedoncurrentpage.php';
<a href="#" data-nextPage=".$nextPage." class="next"></a>

Javascript:

$('.next').click(function(){
    current_page_id = $(this).data('currentPageId');
    window.location = http://....however you get to the next page based on the id

    //or go to the next page if you chose that option
    next_page_location = $(this).data('nextPage');
    window.location = next_page_location;
});

edited Nov 17, 2014 at 17:15

answered Nov 17, 2014 at 17:10

silversunhunter

1,2692 gold badges15 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Javacadabra · Accepted Answer · 2014-11-17 17:21:37Z

1

In the end I opted to go for my own solution as I find it easier to understand, anyone who may wish to do the same as me in the future I simply added this:

//Next Button
$(".next").click(function(e){
    $("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
    var page = $(".active").attr("id").split("-");
    var nxtPage = parseInt(page[0]);
    var nxtPageid = "#"+(nxtPage+1)+"-page";
    console.log(nxtPageid);
    $(".active").removeClass('active');
    $("#results").load("fetch_pages.php", {'page':nxtPage}, function(){ 
        $(nxtPageid).addClass('active');
    });
});

answered Nov 17, 2014 at 17:21

Javacadabra

5,77816 gold badges91 silver badges154 bronze badges

Collectives™ on Stack Overflow

PHP Pagination Next button in existing Code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related