Tuesday, 26 February 2013

Pagination In Jsp Using JavaScript

By Unknown 22:30 Leave a Comment

Overview

You can use this with any programming language. You can use this with .jsp, .php etc. Here we have given one simple web application using Servlet and JSP.
Pre-Requisites:
  • Browser which supports JavaScript

Pre-Requisites for running the below program:
  1. Browser which supports JavaScript
  2. jdk1.6.0_11 ( works with previous versions of JDK)
  3. Note: for previous versions of JDK. All the .java files should be compiled once again. Make sure that all the supporing files are in classpath. To explore more about classpath refer Set Classpath
  4. apache-tomcat-6.0.16 (Works with previous versions)
Sample program
Save as index.jsp
Path (\webapps\index.jsp)
view plaincopy to clipboardprint?
  1.               
  2. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
  3.     pageEncoding="ISO-8859-1"%>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  5. <html>  
  6. <head>  
  7. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  8. <title>Pagination Using JavaScript Example -  
  9. www.javaworkspace.com</title>  
  10. </head>  
  11. <body>  
  12. <h1>Pagination Using JavaScript Example - <a  
  13.     href="http://www.javaworkspace.com" target="_blank">www.javaworkspace.com</a></h1>  
  14. <form method="post" action="Controller"><input type="submit"  
  15.     value="Get Report"></form>  
  16. </body>  
  17. </html>  

Save as Controller.java
Path (\webapps\PaginationUsingJavaScript\WEB-INF\classes\com\javaworkspace\pagination\controller\Controller.java)
view plaincopy to clipboardprint?
  1. /* 
  2.  * Controller.java 
  3.  */  
  4. package com.javaworkspace.pagination.controller;  
  5.   
  6. import java.io.IOException;  
  7. import java.util.ArrayList;  
  8. import java.util.List;  
  9.   
  10. import javax.servlet.RequestDispatcher;  
  11. import javax.servlet.ServletException;  
  12. import javax.servlet.http.HttpServlet;  
  13. import javax.servlet.http.HttpServletRequest;  
  14. import javax.servlet.http.HttpServletResponse;  
  15. import javax.servlet.http.HttpSession;  
  16.   
  17. import com.javaworkspace.pagination.dto.StudentDetailsDTO;  
  18.   
  19. /** 
  20.  * @author www.javaworkspace.com 
  21.  *  
  22.  */  
  23. public class Controller extends HttpServlet {  
  24.     static final long serialVersionUID = 1L;  
  25.   
  26.     protected void doPost(HttpServletRequest request,  
  27.             HttpServletResponse response) throws ServletException, IOException {  
  28.   
  29.         List list = new ArrayList();  
  30.         HttpSession httpSession = request.getSession();  
  31.   
  32.         /* 
  33.          * Hard-coded sample data. Normally this would come from a real data 
  34.          * source such as a database 
  35.          */  
  36.   
  37.         list.add(new StudentDetailsDTO("Mark", "John", 25, "India"));  
  38.         list.add(new StudentDetailsDTO("Harry", "Scott", 35, "England"));  
  39.         list.add(new StudentDetailsDTO("Nathan", "Ridley", 12, "America"));  
  40.         list.add(new StudentDetailsDTO("Tom", "Hanks", 55, "France"));  
  41.         list.add(new StudentDetailsDTO("Roger", "Chris", 65, "Germany"));  
  42.         list.add(new StudentDetailsDTO("Antony", "Jason", 45, "Denmark"));  
  43.   
  44.         httpSession.setAttribute("studentDetails", list);  
  45.   
  46.         // RequestDispatcher dispatcher = request  
  47.         // .getRequestDispatcher("reportWithoutPagination.jsp");  
  48.         RequestDispatcher dispatcher = request  
  49.                 .getRequestDispatcher("paginationUsingJavaScript.jsp");  
  50.         dispatcher.forward(request, response);  
  51.     }  
  52. }  

Save as StudentDetailsDTO.java
Path (\webapps\PaginationUsingJavaScript\WEB-INF\classes\com\javaworkspace\pagination\dto\StudentDetailsDTO.java)
view plaincopy to clipboardprint?
  1. /** 
  2.  * StudentDetailsDTO.java 
  3.  */  
  4. package com.javaworkspace.pagination.dto;  
  5.   
  6. import java.io.Serializable;  
  7.   
  8. /** 
  9.  * @author www.javaworkspace.com 
  10.  *  
  11.  */  
  12. public class StudentDetailsDTO implements Serializable {  
  13.   
  14.     private String studentName;  
  15.     private String fatherName;  
  16.     private int age;  
  17.     private String country;  
  18.   
  19.     public StudentDetailsDTO(String studentName, String fatherName, int age,  
  20.             String country) {  
  21.         this.studentName = studentName;  
  22.         this.fatherName = fatherName;  
  23.         this.age = age;  
  24.         this.country = country;  
  25.     }  
  26.   
  27.     public String getStudentName() {  
  28.         return studentName;  
  29.     }  
  30.   
  31.     public void setStudentName(String studentName) {  
  32.         this.studentName = studentName;  
  33.     }  
  34.   
  35.     public String getFatherName() {  
  36.         return fatherName;  
  37.     }  
  38.   
  39.     public void setFatherName(String fatherName) {  
  40.         this.fatherName = fatherName;  
  41.     }  
  42.   
  43.     public int getAge() {  
  44.         return age;  
  45.     }  
  46.   
  47.     public void setAge(int age) {  
  48.         this.age = age;  
  49.     }  
  50.   
  51.     public String getCountry() {  
  52.         return country;  
  53.     }  
  54.   
  55.     public void setCountry(String country) {  
  56.         this.country = country;  
  57.     }  
  58. }  

Save as paginationUsingJavaScript.jsp
Path (\webapps\PaginationUsingJavaScript\paginationUsingJavaScript.jsp)
view plaincopy to clipboardprint?
  1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
  2.     pageEncoding="ISO-8859-1"%>  
  3. <%@page import="java.util.List"%>  
  4. <%@page import="com.javaworkspace.pagination.dto.StudentDetailsDTO"%>  
  5.   
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  7. <html>  
  8. <head>  
  9. <style type="text/css">  
  10. .pg-normal {  
  11.     color: #0000FF;  
  12.     font-weight: normal;  
  13.     text-decoration: none;  
  14.     cursor: pointer;  
  15. }  
  16.   
  17. .pg-selected {  
  18.     color: #800080;  
  19.     font-weight: bold;  
  20.     text-decoration: underline;  
  21.     cursor: pointer;  
  22. }  
  23. </style>  
  24. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  25. <title>Pagination Using Java Script Tutorial -  
  26. www.javaworkspace.com</title>  
  27. </head>  
  28.   
  29. <script type="text/javascript">  
  30. function Pager(tableName, itemsPerPage) {  
  31.     this.tableName = tableName;  
  32.     this.itemsPerPage = itemsPerPage;  
  33.     this.currentPage = 1;  
  34.     this.pages = 0;  
  35.     this.inited = false;  
  36.       
  37.     this.showRecords = function(from, to) {          
  38.         var rows = document.getElementById(tableName).rows;  
  39.         // i starts from 1 to skip table header row  
  40.         for (var i = 1; i < rows.length; i++) {  
  41.             if (i < from || i > to)    
  42.                 rows[i].style.display = 'none';  
  43.             else  
  44.                 rows[i].style.display = '';  
  45.         }  
  46.     }  
  47.       
  48.     this.showPage = function(pageNumber) {  
  49.      if (! this.inited) {  
  50.       alert("not inited");  
  51.       return;  
  52.      }  
  53.   
  54.         var oldPageAnchor = document.getElementById('pg'+this.currentPage);  
  55.         oldPageAnchor.className = 'pg-normal';  
  56.           
  57.         this.currentPage = pageNumber;  
  58.         var newPageAnchor = document.getElementById('pg'+this.currentPage);  
  59.         newPageAnchor.className = 'pg-selected';  
  60.           
  61.         var from = (pageNumber - 1) * itemsPerPage + 1;  
  62.         var to = from + itemsPerPage - 1;  
  63.         this.showRecords(from, to);  
  64.     }     
  65.       
  66.     this.prev = function() {  
  67.         if (this.currentPage > 1)  
  68.             this.showPage(this.currentPage - 1);  
  69.     }  
  70.       
  71.     this.next = function() {  
  72.         if (this.currentPage < this.pages) {  
  73.             this.showPage(this.currentPage + 1);  
  74.         }  
  75.     }                          
  76.       
  77.     this.init = function() {  
  78.         var rows = document.getElementById(tableName).rows;  
  79.         var records = (rows.length - 1);   
  80.         this.pages = Math.ceil(records / itemsPerPage);  
  81.         this.inited = true;  
  82.     }  
  83.   
  84.     this.showPageNav = function(pagerName, positionId) {  
  85.      if (! this.inited) {  
  86.       alert("not inited");  
  87.       return;  
  88.      }  
  89.      var element = document.getElementById(positionId);  
  90.        
  91.      var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> | ';  
  92.         for (var page = 1; page <= this.pages; page++)   
  93.             pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';  
  94.         pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';              
  95.           
  96.         element.innerHTML = pagerHtml;  
  97.     }  
  98. }  
  99. </script>  
  100.   
  101. <body>  
  102.   
  103. <h1>Pagination Using Java Script</h1>  
  104.   
  105. <%  
  106.     List list = (List) session.getAttribute("studentDetails");  
  107. %>  
  108.   
  109. <table border="1" id="results">  
  110.     <tr bgcolor="orange">  
  111.         <td><strong>Student Name</strong></td>  
  112.         <td><strong>Father Name</strong></td>  
  113.         <td><strong>Age</strong></td>  
  114.         <td><strong>Country</strong></td>  
  115.     </tr>  
  116.     <%  
  117.         for (int i = 0; i < list.size(); i++) {  
  118.     %>  
  119.     <tr>  
  120.         <%  
  121.             StudentDetailsDTO studentDetailsDTO = (StudentDetailsDTO) list  
  122.                         .get(i);  
  123.                 out.println("<td>" + studentDetailsDTO.getStudentName()  
  124.                         + "</td>");  
  125.                 out.println("<td>" + studentDetailsDTO.getFatherName()  
  126.                         + "</td>");  
  127.                 out.println("<td>" + studentDetailsDTO.getAge() + "</td>");  
  128.                 out.println("<td>" + studentDetailsDTO.getCountry() + "</td>");  
  129.         %>  
  130.     </tr>  
  131.     <%  
  132.         }  
  133.     %>  
  134. </table>  
  135. <div id="pageNavPosition"></div>  
  136.   
  137. <script type="text/javascript"><!--  
  138.         var pager = new Pager('results', 2);   
  139.         pager.init();   
  140.         pager.showPageNav('pager', 'pageNavPosition');   
  141.         pager.showPage(1);  
  142.     //--></script>  
  143.   
  144. </body>  
  145. </html>  

Save as web.xml
Path (\WEB-INF\web.xml)
view plaincopy to clipboardprint?
  1. <!--?xml version="1.0" encoding="UTF-8"?-->  
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">  
  3.     <display-name>Pagination Using JavaScript</display-name>  
  4.     <welcome-file-list>  
  5.         <welcome-file>index.html</welcome-file>  
  6.         <welcome-file>index.htm</welcome-file>  
  7.         <welcome-file>index.jsp</welcome-file>  
  8.         <welcome-file>default.html</welcome-file>  
  9.         <welcome-file>default.htm</welcome-file>  
  10.         <welcome-file>default.jsp</welcome-file>  
  11.     </welcome-file-list>  
  12.     <servlet>  
  13.         <description>  
  14.             Display Tag Example www.javaworkspace.com  
  15.         </description>  
  16.         <display-name>Controller</display-name>  
  17.         <servlet-name>Controller</servlet-name>  
  18.         <servlet-class>  
  19.             com.javaworkspace.pagination.controller.Controller  
  20.         </servlet-class>  
  21.     </servlet>  
  22.     <servlet-mapping>  
  23.         <servlet-name>Controller</servlet-name>  
  24.         <url-pattern>/Controller</url-pattern>  
  25.     </servlet-mapping>  
  26. </web-app>  

  • In Controller.java uncomment any one to get the report accordingly.

RequestDispatcher dispatcher = request
.getRequestDispatcher("paginationUsingJavaScript"); //RequestDispatcher dispatcher = request
//.getRequestDispatcher("reportWithoutPagination.jsp"); 
  1. var pager = new Pager('results', 2); - Here 2 is the number of records per page. You can change the number of records per page using this.
  2. Edit the stylesheet to change the link color ... etc.
  3. You can even place the styles sheet and javascript externally.
If you are not a Java Programmer. You can follow the below program. Below example is just a .html program. Here in the below example we have hard coded all the values. You can generate those value dynamically using php,asp...etc 
view plaincopy to clipboardprint?
  1. <html version="-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <head>  
  3. <title>Pagination Using JavaScript - www.javaworkspace.com</title>  
  4. <style type="text/css">  
  5. .pg-normal {  
  6.     color: #0000FF;  
  7.     font-weight: normal;  
  8.     text-decoration: none;  
  9.     cursor: pointer;  
  10. }  
  11.   
  12. .pg-selected {  
  13.     color: #800080;  
  14.     font-weight: bold;  
  15.     text-decoration: underline;  
  16.     cursor: pointer;  
  17. }  
  18. </style>  
  19. </head>  
  20.   
  21. <script type="text/javascript">  
  22.   
  23. function Pager(tableName, itemsPerPage) {  
  24.     this.tableName = tableName;  
  25.     this.itemsPerPage = itemsPerPage;  
  26.     this.currentPage = 1;  
  27.     this.pages = 0;  
  28.     this.inited = false;  
  29.       
  30.     this.showRecords = function(from, to) {          
  31.         var rows = document.getElementById(tableName).rows;  
  32.         // i starts from 1 to skip table header row  
  33.         for (var i = 1; i < rows.length; i++) {  
  34.             if (i < from || i > to)    
  35.                 rows[i].style.display = 'none';  
  36.             else  
  37.                 rows[i].style.display = '';  
  38.         }  
  39.     }  
  40.       
  41.     this.showPage = function(pageNumber) {  
  42.      if (! this.inited) {  
  43.       alert("not inited");  
  44.       return;  
  45.      }  
  46.   
  47.         var oldPageAnchor = document.getElementById('pg'+this.currentPage);  
  48.         oldPageAnchor.className = 'pg-normal';  
  49.           
  50.         this.currentPage = pageNumber;  
  51.         var newPageAnchor = document.getElementById('pg'+this.currentPage);  
  52.         newPageAnchor.className = 'pg-selected';  
  53.           
  54.         var from = (pageNumber - 1) * itemsPerPage + 1;  
  55.         var to = from + itemsPerPage - 1;  
  56.         this.showRecords(from, to);  
  57.     }     
  58.       
  59.     this.prev = function() {  
  60.         if (this.currentPage > 1)  
  61.             this.showPage(this.currentPage - 1);  
  62.     }  
  63.       
  64.     this.next = function() {  
  65.         if (this.currentPage < this.pages) {  
  66.             this.showPage(this.currentPage + 1);  
  67.         }  
  68.     }                          
  69.       
  70.     this.init = function() {  
  71.         var rows = document.getElementById(tableName).rows;  
  72.         var records = (rows.length - 1);   
  73.         this.pages = Math.ceil(records / itemsPerPage);  
  74.         this.inited = true;  
  75.     }  
  76.   
  77.     this.showPageNav = function(pagerName, positionId) {  
  78.      if (! this.inited) {  
  79.       alert("not inited");  
  80.       return;  
  81.      }  
  82.      var element = document.getElementById(positionId);  
  83.        
  84.      var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> | ';  
  85.         for (var page = 1; page <= this.pages; page++)   
  86.             pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';  
  87.         pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';              
  88.           
  89.         element.innerHTML = pagerHtml;  
  90.     }  
  91. }  
  92.   
  93. </script>  
  94. <body>  
  95. <form action="" method="get" enctype="application/x-www-form-urlencoded">  
  96. <h1>Pagination Using JavaScript - <a  
  97.     href="http://www.javaworkspace.com" target="_blank">www.javaworkspace.com</a></h1>  
  98. <table id="results">  
  99.     <tr>  
  100.         <th>#</th>  
  101.         <th>field</th>  
  102.     </tr>  
  103.     <tr>  
  104.         <td>1</td>  
  105.         <td>rajeev</td>  
  106.     </tr>  
  107.     <tr>  
  108.         <td>2</td>  
  109.         <td>ramesh</td>  
  110.     </tr>  
  111.     <tr>  
  112.         <td>3</td>  
  113.         <td>Rahul</td>  
  114.     </tr>  
  115.     <tr>  
  116.         <td>4</td>  
  117.         <td>Bala</td>  
  118.     </tr>  
  119.     <tr>  
  120.         <td>5</td>  
  121.         <td>Nathan</td>  
  122.     </tr>  
  123.     <tr>  
  124.         <td>6</td>  
  125.         <td>Robin</td>  
  126.     </tr>  
  127.     <tr>  
  128.         <td>7</td>  
  129.         <td>Sambha</td>  
  130.     </tr>  
  131.     <tr>  
  132.         <td>8</td>  
  133.         <td>Arjun</td>  
  134.     </tr>  
  135.     <tr>  
  136.         <td>9</td>  
  137.         <td>Satyan</td>  
  138.     </tr>  
  139.     <tr>  
  140.         <td>10</td>  
  141.         <td>Singapore</td>  
  142.     </tr>  
  143. </table>  
  144. <br />  
  145. <div id="pageNavPosition"></div>  
  146. <br />  
  147. <div><input type="submit"  
  148.     onclick="alert('Hey, this is just a sample!'); return false;" /> <input  
  149.     type="reset" /></div>  
  150. </form>  
  151.   
  152. <script type="text/javascript"><!--  
  153.         var pager = new Pager('results', 3);   
  154.         pager.init();   
  155.         pager.showPageNav('pager', 'pageNavPosition');   
  156.         pager.showPage(1);  
  157.     //--></script>  
  158.   
  159. </body>  
  160. </html>  

0 comments:

Post a Comment