CODEWITHSUNDEEP
phpjavascriptmysqlajaxpagination
Ilja
Ilja

Reputation: 46479

AJAX pagination solution for PHP

Right now I use a pagination system that requires url like

http://mypage.com/index.php?page=1
http://mypage.com/index.php?page=2
http://mypage.com/index.php?page=3
http://mypage.com/index.php?page=4
etc...

So it uses $_GET method to find out what page the user is on. I decided to switch most of my website to ajax and came over a problem. When I use Ajax to load new content on a page the url stays the same all the time e.g. http://mypage.com/index.php . Therefore pagination system I use is useless. I was not able to find efficient AJAX pagination systems, (e.g some where lagy, most required user to scrol to the tiop each time he / she clicked on a next page, because they stayed at the bottom of the page when they clicked next page. etc...)

So I decided to ask you lot if anyone has an efficient pagination solution that works with ajax.

Example of what needs to be paginated:

$sql = mysql_query("SELECT * FROM myMembers WHERE username='$username' LIMIT 1") or die (mysql_error("There was an error in connection"));

//Gather profile information
while($row = mysql_fetch_assoc($sql)){ 
$username = $row["username"];
$id = $row["id"];

$data_display .= '<b>'.Name.'</b> has an id of <span style="color: f0f0f0;">'.$id.'</span>';

}

<!doctype>
<html>
<?php echo "$data_display"; ?> //and I need to paginate this entries
</html>

jQuery that loads new content from different pages into #content div

<script type="text/javascript">
function viewHome(){
    $('#woodheader').load("inc/home_top.php", function () {
            $(this).hide().fadeIn(700)
        });
    $('#content').html('<span class="loader">Loading..&nbsp;&nbsp;&nbsp;<img class="loaderimg" src="images/ajax_loader.gif"/></span>').load("inc/home.php", function () {
            $(this).hide().fadeIn(700)
        });
}
function viewAbout(){
    $('#woodheader').load("inc/about_top.php", function () {
            $(this).hide().fadeIn(700)
        });
    $('#content').html('<span class="loader">Loading..&nbsp;&nbsp;&nbsp;<img class="loaderimg" src="images/ajax_loader.gif"/></span>').load("inc/about.php", function () {
            $(this).hide().fadeIn(700)
        });
}
function viewProducts(){
    $('#woodheader').load("inc/products_top.php", function () {
            $(this).hide().fadeIn(700)
        });
     $('#content').html('<span class="loader">Loading..&nbsp;&nbsp;&nbsp;<img class="loaderimg" src="images/ajax_loader.gif"/></span>').load("inc/products.php", function () {
            $(this).hide().fadeIn(700)
        });
}
</script>

Upvotes: 3

Views: 2133

Answers (2)

Shedokan
Shedokan

Reputation: 1202

Pagination is not as hard as you can think, you can use jQuery's load() function to load content into an element with the page's content.

So for example you have:

<div id="page-content"></div>
<a href="#" id="link1">Page 1</a>
<a href="#" id="link2">Page 1</a>
<a href="#" id="link3">Page 3</a>

<script>
$.ready(function(){
  var currPage = <?=$pageNumber; ?>; // The page number loaded on page refresh
  $('#link1,#link2,#link3').onclick(function(){
    // Get the first number inside the id
    var pageNum = parseInt($(this).attr('id'));

    // Don't load the same page
    if(currPage == pageNum) return;

    // Show loading animation or whatever

    // Load the page using ajax
    $('#page-content').load('pages.php?page='+pageNum, function(){
      // End loading animation
      currPage = pageNum;
    });

    return false; // Important for not scrolling up
  });
});
</script>

Regarding the url, you have three options to choose from when a user clicks a page link:

  1. Just load the page with no changing of the url
  2. Use the HTML5 history.pushState(see MDN resource) if supported and with option 3 as fallback for unsupported browsers

  3. Use #page1, #page1 etc. as the href value of the links so that the user knows on what page they are on and parse the value of the url in php:

    $uri = explode('#page', $_SERVER['REQUEST_URI']);
$pageNumber = intval($uri[1]);

Upvotes: 3

Andreas Wederbrand
Andreas Wederbrand

Reputation: 39981

I would create a index.php that doesn't load any $data_display initially. Internally in javascript I would keep a variable named $page that would initially equals 1.

After load it would make a ajax call to names.php?page=$page and pass the results to a handler that presents it to the user.

Then on the links to "back" and "next" I would put a javascript function that first sets $page to the previous or next number, then calls names.php?page=$page and pass the results to the same handler.

Upvotes: 0

Related Questions