Question

i have this .js file for the pagination in html anybody can help me what i have to change to show the different url for each page & user can save that url & can use it for future use to go on that specific page.

(.js file start from below)

function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;

this.showRecords = function(from, to) {        
    var rows = document.getElementById(tableName).rows;
    // i starts from 1 to skip table header row
    for (var i = 1; i < rows.length; i++) {
        if (i < from || i > to)  
            rows[i].style.display = 'none';
        else
            rows[i].style.display = '';
    }
}

this.showPage = function(pageNumber) {
    if (! this.inited) {
        alert("not inited");
        return;
    }

    var oldPageAnchor = document.getElementById('pg'+this.currentPage);
    oldPageAnchor.className = 'pg-normal';

    this.currentPage = pageNumber;
    var newPageAnchor = document.getElementById('pg'+this.currentPage);
    newPageAnchor.className = 'pg-selected';

    var from = (pageNumber - 1) * itemsPerPage + 1;
    var to = from + itemsPerPage - 1;
    this.showRecords(from, to);
}   

this.prev = function() {
    if (this.currentPage > 1)
        this.showPage(this.currentPage - 1);
}

this.next = function() {
    if (this.currentPage < this.pages) {
        this.showPage(this.currentPage + 1);
    }
}                        

this.init = function() {
    var rows = document.getElementById(tableName).rows;
    var records = (rows.length - 1); 
    this.pages = Math.ceil(records / itemsPerPage);
    this.inited = true;
}

this.showPageNav = function(pagerName, positionId) {
    if (! this.inited) {
        alert("not inited");
        return;
    }
    var element = document.getElementById(positionId);

    var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> &#171 Prev </span> | ';
    for (var page = 1; page <= this.pages; page++) 
        pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
    pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next &#187;</span>';            

    element.innerHTML = pagerHtml;
}

}

Answer 1

in this.showPage() update the url hash with something like “pg=1”:

location.hash = "#pg=" + pageNumber;

That method will add an item to your page history. If you don’t want to add an item to your page history, use this:

location.replace("#pg=" + pageNumber);

Then, when the page is loaded, after you call pager.init(), you’ll want to call pager.showPage(). You can use this code to decide whether to load the first page or the page from the url::

var page = /\bpg=(\d+)\b/.test(location.hash) ? parseInt(RegExp.$1) : 1;
pager.showPage(page);