Click here to Skip to main content
14,880,316 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi,
XML
<script type="text/javascript">
     var pager = new Pager('results',10);
     pager.init();
     pager.showPageNav('pager', 'pageNavPosition');
     pager.showPage(1);
</script>

jquery code:
C#
function Pager(tableName, itemsPerPage) {
    this.tableName = tableName;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.pages = 10;
    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;
    }
}

It is Working fine like ,
Prev 1 2 3 4 5 6 7 8 9 10 ...........................................................Next
my requirement is want to show each time 10 pages only.
Perv 1 2 3 4 5 6 7 8 9 10 Next
if i click next another another 10 has to come .

plz Help me.....
Posted
Updated 7-Dec-13 0:09am
v3
Comments
JoCodes 7-Dec-13 11:17am
   
Now how many per page items its showing?
Anji Chelloju 20-Jan-14 7:09am
   
HI,THANKS FOR THE REPLY....
IT IS SHOWING TOTAL ITEMS

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900