Share on Google+Share on Google+

3 Answer(s)      6 years ago
Posted in : Development process

How to set pagination using java script to display data


View Answers

April 29, 2011 at 4:52 PM


        <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;

        <script type="text/javascript" src="pagination.js"></script>
        <form action="" method="get" >
        <table border="1" id="results">
            <tr><th>Name</th><th>Address</th><th>Contact No</th></tr>
            <tr><td>D</td><td>Chennai</td><td>4444444444</td></tr> <tr><td>E</td><td>Hyderabad</td><td>5555555555</td></tr>
        <div id="pageNavPosition"></div>

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

April 29, 2011 at 4:53 PM



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");
    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) = 'none';
        else = '';
    if (pgPrev != null) {
        if (this.currentPage == 1) = 'none';
        else = '';
this.prev = function () {
    if (this.currentPage > 1) this.showPage(this.currentPage - 1);
} = 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:


this.showPageNav = function (start) {
        if (!this.inited) {
            alert("not inited");
        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) {
            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 += '   ';
        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  How to apply pagination in JSP. Please help
Pagination  How to implement pagination in struts using hibernate
pagination  How to set pagination using java script to display data
Pagination  How to create pagination in jsp with EJB using MS SQL
Pagination  I want to write one where condition in sql query in pagination concept
Pagination  Is their plug n play approach for creating pagination? 1) Server side as well as client side
pagination   Simple way for pagination in jsp using java script to display data without send database
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  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  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
=rs2.getInt("cnt"); } %> Pagination of JSP page Terr_Code Terr_Name
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  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  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 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
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><
Hibernate Pagination
In this tutorial we will discuss concept of pagination in hibernate
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
Pagination in jsp - JSP-Servlet
Pagination in jsp  I need an example of pagination in JSP using display tag
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 example with html code
Pagination example with html code  Hi, could u please provide pagination code with clear cut explanation. Thanks in advance
pagination in hibernate with jsp
pagination in hibernate with jsp  Hi, plz give me example on pagination .   Hi Friend, Visit Here Thanks
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 without using database in php
Pagination without using database in php  How can I show multiple images in multiple rows with pagination in php


Advertisement null