How to link to next and previous pages in a sequence with no PHP (just jQuery/javascript)

Question

Let's say I have a series of pages ("example_1.html","example_2.html","example_3.html", and so on) and I want to have next/prev buttons leading to each. I don't want any overly fancy pagination, just prev and next button.

I also want these pages once the end is reached, to loop back so "example_12.html" would naturally loop back to the beginning "example_1.html".

I would like to be able to simply ad pages to the sequence, by just creating another page, without having to go back into existing pages to change the links.

Is there a simple way to do this without php, or server side data fetching? Also, I don't want to have to constantly update the list as more pages are added over time, and I don't want to include any list in the pages

I can always find something close, but never anything I understand, is there a really simplified version for someone who is not the most astute at javascript?

Answer 1

If you really can't use a server-side language (perhaps if you're looking to host it statically), and don't want the hassle of manually setting links, I'd recommend using a static-site generator like Jekyll. If you're sure you want a JS solution, this should work:

// Get current page url, remove the `.html` extension and split by underscore.
// The current page number will be the last element in the returned array.
var urlFrags = window.location.href.replace(".html", "").split("_"),
    // Get the last element of the `urlFrags` array and parse. This should be the current page number.
    curPage = parseInt(urlFrags[urlFrags.length - 1]),
    // Form the url of the expected next page. (Current page number + 1.)
    nextPage = "example_" + (curPage + 1) + ".html";

// Check if a page on this domain exists.
// Success returns true, error returns false.
function pageExists(url, callback){
    $.ajax({
        url: url,
        type: "HEAD",
        success: function(){ callback(true); },
        error: function(){ callback(false); }
    });
}

// Setup links for later.
var backLink, nextLink;

// Check if expected next page exists.
pageExists(nextPage, function(exists){
    if(exists){
        // If it does, set nextlink as expected next page.
        nextLink = nextPage;
    } else {
        // Otherwise, loop back to the start.
        nextLink = "example_1.html";
    }
});

if(curPage > 1){
    // We know the previous page must exist, so long as you're not on the first page.
    backLink = "example_" + (curPage - 1) + ".html";

    // It's not practical to try and loop back to the end if you go back on the first page.
    // You'd have to query pages until you got an error. So just leave it undefined, and ideally remove the button.
}

// Example button settings, using jQuery. Replace with whatever you're using.
$("#back").prop("href", backLink);
$("#next").prop("href", nextLink);

Obviously couldn't test all of this without setting up an identical site, so forgive any errors ;)