Javascript pagination (next project / previous project) with jQuery?

Question

I recently came upon a site that has done exactly what I want as far as pagination goes. I have the same basic setup as the site I just found.

I would like to have prev and next links to navigate through my portfolio. Each project would be in a separate file (1.php, 2.php, 3.php, etc.) For example, if I am on the 1.php page and I click "next project" it will take me to 2.php.

The site I am referencing to accomplishes this with javascript. I don't think it's jQuery:

function nextPg(step) {
  var str = window.location.href;
  if(pNum = str.match(/(\d+)\.php/i)){
    pNum = pNum[1] * 1 + step+'';
    if ((pNum<1) || (pNum > 20)) { pNum = 1; }
    pNum = "".substr(0, 4-pNum.length)+pNum;
  window.location = str.replace(/\d+\.php/i, pNum+'.php'); 
}
}

And then the HTML:

<a href="javascript:nextPg(+1)" class="nextProject">Next Project</a>

I can't really decipher the code above, but I assume the script detects what page you are on and the injects a number into the next page link that is one higher than the current page.

I suppose I could copy this code but it seems like it's not the best solution. Is there a way to do this with php(for people with javascript turned off)? And if not, can this script be converted for use with jQuery?

Also, if it can be done with php, can it be done without dirty URLs? For example, http://www.example.com/index.php?next=31

I would like to retain link-ability.

I have searched on stackoverflow on this topic. There are many questions about pagination within a page, but none about navigating to another page that I could find.

Answer 1

From your question you know how many pages there are going to be. From this I mean that the content for the pages themselves are hardcoded, and not dynamically loaded from a database.

If this is the approach you're going to take you can take the same course in your javascript: set an array up with the filenames that you will be requesting, and then attach event handlers to your prev/next buttons to cycle through the array. You will also need to keep track of the 'current' page, and check that incrementing/decrementing the current page will not take you out of the bounds of your page array.

My solution below does the loading of the next page via AJAX, and does not change the actual location of the browser. This seems like a better approach to me, but your situation may be different. If so, you can just replace the related AJAX calls with window.location = pages[curPage] statements.

jQuery: (untested)

$(function() {
    var pages = [
        '1.php',
        '2.php',
        '3.php'
    ];
    var curPage = 0;

    $('.next').bind('click', function() {
        curPage++;
        if(curPage > pages.length)
            curPage = 0;
        $.ajax({
            url: pages[curPage],
            success: function(html) {
                $('#pageContentContainer').html(html);
            }
        });
    });

    $('.prev').bind('click', function() {
        curPage--;
        if(curPage < 0)
            curPage = (pages.length -1);
        $.ajax({
            url: pages[curPage],
            success: function(html) {
                $('#pageContentContainer').html(html);
            }
        });
    });

});

HTML:

<div id = "pageContentContainer">
    This is the default content to display upon page load.
</div>
<a class = "prev">Previous</a>
<a class = "next">Next</a>

To migrate this solution to one that does not have the pages themselves hardcoded but instead loaded from an external database, you could simply write a PHP script that outputs a JSON encoded array of the pages, and then call that script via AJAX and parse the JSON to replace the pages array above.

var pages = [];
$.ajax({
    url: '/ajax/pages.php',
    success: function(json) {
        pages = JSON.parse(json);
    }
});