pagination

simple pagination

by slawe

HTML

<a href="javascript:firstPage()" id="btn_first">First</a>
<a href="javascript:prevPage()" id="btn_prev">Prev</a>
page <span id="page"></span>
<a href="javascript:nextPage()" id="btn_next">Next</a>
<a href="javascript:lastPage()" id="btn_last">Last</a>

JavaScript

var current_page = 3;
var records_per_page = 10;
var total_pages = 21;

function firstPage()
{
	current_page = 1;
  changePage(current_page);
}

function prevPage()
{
    if (current_page > 1) {
        current_page--;
        changePage(current_page);
    }
}

function nextPage()
{
    if (current_page < total_pages) {
        current_page++;
        changePage(current_page);
    }
}

function lastPage()
{
	current_page = total_pages;
  changePage(current_page);
}
    
function changePage(page)
{
		var btn_first = document.getElementById("btn_first");
    var btn_next = document.getElementById("btn_next");
    var btn_prev = document.getElementById("btn_prev");
    var btn_last = document.getElementById("btn_last");
    var page_span = document.getElementById("page");
 
    // Validate page
    if (page < 1) page = 1;
    if (page > total_pages) page = total_pages;

    
    page_span.innerHTML = page + " of " + total_pages;

    if (page == 1) {
        btn_first.style.visibility = "hidden";
        btn_prev.style.visibility = "hidden";
    } else {
        btn_first.style.visibility = "visible";
        btn_prev.style.visibility = "visible";
    }

    if (page == total_pages) {
        btn_next.style.visibility = "hidden";
        btn_last.style.visibility = "hidden";
    } else {
        btn_next.style.visibility = "visible";
        btn_last.style.visibility = "visible";
    }
}

window.onload = function() {
    changePage(current_page);
};