CODEWITHSUNDEEP
javascriptphpjqueryajaxpagination
Javacadabra
Javacadabra

Reputation: 5758

PHP Pagination Next button in existing Code

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.

Upvotes: 0

Views: 387

Answers (2)

Javacadabra
Javacadabra

Reputation: 5758

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');
    });
});

Upvotes: 1

silversunhunter
silversunhunter

Reputation: 1269

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;
});

Upvotes: 1

Related Questions