pagination

How to set pagination using java script to display data

View Answers

April 29, 2011 at 4:52 PM

1)page.jsp:

<html>
    <head>
        <style type="text/css">   
            .pg-normal {
                color: black;
                font-weight: normal;
                text-decoration: none;   
                cursor: pointer;   
            }
            .pg-selected {
                color: black;
                font-weight: bold;       
                text-decoration: underline;
                cursor: pointer;
            }
        </style>

        <script type="text/javascript" src="pagination.js"></script>
    </head>
        <form action="" method="get" >
        <table border="1" id="results">
            <tr><th>Name</th><th>Address</th><th>Contact No</th></tr>
            <tr><td>A</td><td>Delhi</td><td>1111111111</td></tr>
            <tr><td>B</td><td>Mumbai</td><td>2222222222</td></tr>
            <tr><td>C</td><td>Kolkata</td><td>3333333333</td></tr>
            <tr><td>D</td><td>Chennai</td><td>4444444444</td></tr> <tr><td>E</td><td>Hyderabad</td><td>5555555555</td></tr>
            <tr><td>F</td><td>Pune</td><td>6666666666</td></tr>
            <tr><td>G</td><td>Agra</td><td>7777777777</td></tr>
            <tr><td>H</td><td>Chandigarh</td><td>8888888888</td></tr>
            <tr><td>I</td><td>Bangalore</td><td>9999999999</td></tr>
            <tr><td>J</td><td>Lucknow</td><td>1010101010</td></tr>
        </table>
        <div id="pageNavPosition"></div>
        </form>

    <script type="text/javascript"><!--
    var pager = new Pager('results', 2, 'pager', 'pageNavPosition');
    pager.init();
    pager.showPage(1);
    </script>
   </html>

April 29, 2011 at 4:53 PM

continue..

2)pagination.js:

function Pager(tableName, itemsPerPage, pagerName, positionId) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.pagerName = pagerName;
this.positionId = positionId;
this.currentPage = 1;
this.pages = 0;
this.inited = false;
this.numbers = new Array(10);

this.showRecords = function (from, to) {
    var table = document.getElementById(tableName);
    var rows = table.rows;
    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;
    }
    if (this.isRedrawNeeded(pageNumber)) {
        var startPage = Math.floor((pageNumber - 1) * 0.1) * 10;
        this.showPageNav(startPage + 1);
    }
    var oldPageAnchor = document.getElementById(this.pagerName + 'pg' + this.currentPage);
    if (oldPageAnchor != null) {
        oldPageAnchor.className = 'pg-normal';
    }
    this.currentPage = pageNumber;
    var newPageAnchor = document.getElementById(this.pagerName + 'pg' + this.currentPage);
    if (newPageAnchor != null) {
        newPageAnchor.className = 'pg-selected';
    }
    var from = (pageNumber - 1) * itemsPerPage + 1;
    var to = from + itemsPerPage - 1;
    this.showRecords(from, to);

    var pgNext = document.getElementById(this.pagerName + 'pgNext');
    var pgPrev = document.getElementById(this.pagerName + 'pgPrev');

    if (pgNext != null) {
        if (this.currentPage == this.pages) pgNext.style.display = 'none';
        else pgNext.style.display = '';
    }
    if (pgPrev != null) {
        if (this.currentPage == 1) pgPrev.style.display = 'none';
        else pgPrev.style.display = '';
    }
}
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.isRedrawNeeded = function (pageNumber) {

    for (var i = 0; i < this.numbers.length; i++) {
        if (this.numbers[i] == pageNumber) {
            return false;
        }
    }
    return true;
}

April 29, 2011 at 4:54 PM

part of pagination.js:

continue.......

this.showPageNav = function (start) {
        if (!this.inited) {
            alert("not inited");
            return;
        }
        var element = document.getElementById(this.positionId);
        var loopEnd = start + 9;
        var index = 0;
        this.numbers = new Array(10);

        var pagerHtml = ' ';
        if (this.pages > 2) {
            pagerHtml += '<span id="' + this.pagerName + 'pgPrev" onclick="' + this.pagerName + '.prev();" class="pg-normal"> << Prev </span>';
        }
        for (var page = start; page <= loopEnd; page++) {
            if (page > this.pages) {
                break;
            }
            this.numbers[index] = page;
            pagerHtml += '<span id="' + this.pagerName + 'pg' + page + '" class="pg-normal" onclick="' + this.pagerName + '.showPage(' + page + ');">' + page + '</span>';
            if (page != loopEnd) {
                pagerHtml += '   ';
            }
            index++;
        }
        page--;
        if (this.pages > page) {
            pagerHtml += '<span class="regularDataBlue">...</span>';
        }
        pagerHtml += '<span id="' + this.pagerName + 'pgNext" onclick="' + this.pagerName + '.next();" class="pg-normal"> Next >></span>';
        element.innerHTML = pagerHtml;
    }
}









Related Tutorials/Questions & Answers:
Pagination
Pagination  How to create pagination in jsp with EJB using MS SQL
Pagination
Pagination  How to implement pagination in struts using hibernate
Advertisements
Pagination
Pagination  How to apply pagination in JSP. Please help
pagination
pagination  How to set pagination using java script to display data
pagination
pagination   Simple way for pagination in jsp using java script to display data without send database
Pagination
Pagination  Is their plug n play approach for creating pagination? 1) Server side as well as client side
Pagination
Pagination  I want to write one where condition in sql query in pagination concept
Pagination
Pagination  I want to know how to use pagination in jsp. I have a list object from that i want to display 3 questions per page can u help me
pagination
pagination  I need to give pagination with where condition (query="select * from qtn where qid='"+replyQuesionId+"'limit "+iPageNo+","+showRows+"" ) like this I want, without where condition it is working but with condition
pagination
pagination  I need to give pagination with where condition (query.......   Here is a simple jsp pagination code where we have used mysql database...()) { totalRows=rs2.getInt("cnt"); } %> <html> <h3>Pagination of JSP
Pagination
=rs2.getInt("cnt"); } %> Pagination of JSP page Terr_Code Terr_Name
pagination
pagination  how can i start pagination in jsp?   Hi Friend, Try the following code: <%@ page language="java" %> <%@ page import...;Pagination of JSP page</h3> <body> <form> <input type="hidden
Pagination
Pagination  pagination in jsp   Hi Friend, Try the following code: <%@ page language="java" %> <%@ page import="java.sql.*" %>...()) { totalRows=rs2.getInt("cnt"); } %> <html> <h3>Pagination of JSP
pagination
code of pagination. In the given code,we have taken the database table student...;Pagination of JSP page</h3> <body> <form> <input type="hidden
Pagination in java
Pagination in java  How to handle pagination when there are records like say in millions in java? Or do we handle this using SQL? I as asked... far good performance then Java pagination. Thanks
pagination in jsf
pagination in jsf  Hi , i am implemeting an online exam system , i have placed my questions as an arraylist in my jsp file within tag , but now i want to paginate these questions based on respective questions by clicking
jsp pagination
jsp pagination  I want to implement pagination on jsp page Each jsp page having some radio buttons, on click of next previous page selected radio buttons are reset. I want to maintain state of selected radio buttons on previous
Hibernate Pagination
In this tutorial we will discuss concept of pagination in hibernate
Pagination in jsp - JSP-Servlet
Pagination in jsp  I need an example of pagination in JSP using display tag
JSP Pagination
to be shown, I want to implement Pagination.. Can someone show me a sample code which I could possibly use??   JSP Pagination pagination.jsp: <%@ page..."); } %> <html><h3>Pagination of JSP page</h3> <body><
jsf pagination
of pagination. In the given code,we have taken the database table student(rollNo,name,marks...()) { totalRows=rs2.getInt("cnt"); } %> <html> <h3>Pagination of JSP
JTable Pagination
JTable Pagination  Hello , I have the following Code. I am able to fetch the Data from the Database. But i need to implement pagination for the same. Can someone please help me out with this ? I have tried out many things from
Two Pagination in one page
Two Pagination in one page  hai friends any one help me. how do u make two pagination script in same page i'm used some ajax coding one pagination script is working but another pagination is not working please help me urgent
pagination in hibernate with jsp
pagination in hibernate with jsp  Hi, plz give me example on pagination .   Hi Friend, Visit HereADS_TO_REPLACE_1 Thanks
Pagination example with html code
Pagination example with html code  Hi, could u please provide pagination code with clear cut explanation. Thanks in advance
pagination - JSP-Servlet
pagination  Hi, could u tell me how i will handle pagination... friend, Simple pagination in jsp Simple pagination in JSP... Simple pagination in jsp Displaying Records
pagination in jsp - JDBC
pagination in jsp  Hi, I have millions of records in my oracle d... in advance...   Hi friend, This is simple code of pagination. Simple pagination in jsp
pagination+dynamic pagesize+hibernate - Struts
pagination+dynamic pagesize+hibernate  pagination using hibernate with dynamic page size plzz heilp me
Pagination without using database in php
Pagination without using database in php  How can I show multiple images in multiple rows with pagination in php
Pagination in PHP code - PHP
Pagination in PHP code  3.Pagination in PHP codeIs it possible to get the paging in PHP without database call? How will I show the image instead of numbering? any code that can help
pagination in php - Ajax
pagination in php  i want to fetch my data base in view page...i hav done pagination... i don't want the order....like... 1 2 3 4 . . . last i want the order in... 1 2 3 4 5 6 7
Pagination in struts 2
Pagination in struts 2  Hi, I have one question regarding pagination in struts 2 I saw one of your code that you explain here:- http... me or guide me what other option i have to use pagination in struts 2 without
ModuleNotFoundError: No module named 'apistar-pagination'
ModuleNotFoundError: No module named 'apistar-pagination'  Hi, My... named 'apistar-pagination' How to remove the ModuleNotFoundError: No module named 'apistar-pagination' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'codingsoho-pagination'
ModuleNotFoundError: No module named 'codingsoho-pagination'  Hi...: No module named 'codingsoho-pagination' How to remove the ModuleNotFoundError: No module named 'codingsoho-pagination' error? Thanks   Hi
ModuleNotFoundError: No module named 'codingsoho-pagination'
ModuleNotFoundError: No module named 'codingsoho-pagination'  Hi...: No module named 'codingsoho-pagination' How to remove the ModuleNotFoundError: No module named 'codingsoho-pagination' error? Thanks   Hi
ModuleNotFoundError: No module named 'codingsoho-pagination'
ModuleNotFoundError: No module named 'codingsoho-pagination'  Hi...: No module named 'codingsoho-pagination' How to remove the ModuleNotFoundError: No module named 'codingsoho-pagination' error? Thanks   Hi
ModuleNotFoundError: No module named 'django-pagination'
ModuleNotFoundError: No module named 'django-pagination'  Hi, My... named 'django-pagination' How to remove the ModuleNotFoundError: No module named 'django-pagination' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'dj-pagination'
ModuleNotFoundError: No module named 'dj-pagination'  Hi, My... 'dj-pagination' How to remove the ModuleNotFoundError: No module named 'dj-pagination' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'falcon-pagination'
ModuleNotFoundError: No module named 'falcon-pagination'  Hi, My... named 'falcon-pagination' How to remove the ModuleNotFoundError: No module named 'falcon-pagination' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'filter-and-pagination'
ModuleNotFoundError: No module named 'filter-and-pagination'  Hi...: No module named 'filter-and-pagination' How to remove the ModuleNotFoundError: No module named 'filter-and-pagination' error? Thanks   Hi
ModuleNotFoundError: No module named 'filter-and-pagination'
ModuleNotFoundError: No module named 'filter-and-pagination'  Hi...: No module named 'filter-and-pagination' How to remove the ModuleNotFoundError: No module named 'filter-and-pagination' error? Thanks   Hi
ModuleNotFoundError: No module named 'incuna-pagination'
ModuleNotFoundError: No module named 'incuna-pagination'  Hi, My... named 'incuna-pagination' How to remove the ModuleNotFoundError: No module named 'incuna-pagination' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'pyramid_pagination'
ModuleNotFoundError: No module named 'pyramid_pagination'  Hi, My... named 'pyramid_pagination' How to remove the ModuleNotFoundError: No module named 'pyramid_pagination' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'sqlalchemy-pagination'
ModuleNotFoundError: No module named 'sqlalchemy-pagination'  Hi...: No module named 'sqlalchemy-pagination' How to remove the ModuleNotFoundError: No module named 'sqlalchemy-pagination' error? Thanks   Hi
ModuleNotFoundError: No module named 'terminal-pagination'
ModuleNotFoundError: No module named 'terminal-pagination'  Hi, My... named 'terminal-pagination' How to remove the ModuleNotFoundError: No module named 'terminal-pagination' error? Thanks   Hi
ModuleNotFoundError: No module named 'api_pagination'
ModuleNotFoundError: No module named 'api_pagination'  Hi, My... named 'api_pagination' How to remove the ModuleNotFoundError: No module named 'api_pagination' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'apistar-pagination'
ModuleNotFoundError: No module named 'apistar-pagination'  Hi, My... named 'apistar-pagination' How to remove the ModuleNotFoundError: No module named 'apistar-pagination' error? Thanks   Hi, In your

Questions by Category