In this instructional exercise, you will figure out how to implement pagination in JSP.
Pagination is a system of separating the substance into a few pages. Getting every one of the
information at a time will be tedious and it likewise brings about poor client experience as the client needs to look down to see the information. Along these
lines, pagination is utilized to accelerate information bringing in the light of the fact that solitary chose the measure of information is brought structure server by client demand.
Underneath I have shared JSP pagination example. It is made utilizing Eclipse IDE and
the innovations I have utilized are JSP, jQuery, AJAX, JSON and MySQL.
JSP Pagination Example
Note: To utilize jQuery you need to include the jQuery library. You can download it from here. To utilize JSON here
I have utilized JSON.simple library. You can download it from here. Ensure you remember both of these libraries for your undertaking.
Make a powerful web venture in Eclipse and include following code in particular documents.
index.jsp
This page shows the information to the client. All pagination rationale is composed here.
<html>
<head>
<title>JSP Pagination Example</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var totalRecords;
var recordsPerPage=5;
var recordsToFetch=recordsPerPage;
var totalPages;
var currentPage=1;
var currentIndex=0;
$.get("processRequest.jsp?requestType=countRecords",function(data){
var JSONData=JSON.parse(data);
totalRecords=JSONData.count;
totalPages=Math.floor(totalRecords/recordsPerPage);
if(totalRecords%recordsPerPage!=0){
totalPages++;
}
if(totalRecords<recordsPerPage){
recordsToFetch=totalRecords%recordsPerPage;
}
else{
recordsToFetch=recordsPerPage;
}
$("#page").html("Page "+currentPage+" of "+totalPages);
});
$.get("processRequest.jsp?requestType=getRecords¤tIndex="+currentIndex+"&recordsToFetch="+recordsToFetch,function(data){
var JSONData=JSON.parse(data);
for(i=0;i<recordsToFetch;++i){
$("#div1").append("<p>"+(currentIndex+1)+". "+JSONData.record[i]+"</p>");
currentIndex++;
}
if(currentPage==totalPages){
$("#next").hide();
}
else{
$("#next").show();
}
if(currentPage==1){
$("#back").hide();
}
else{
$("#back").show();
}
});
$("#next").click(function(){
$("#div1").html("");
currentPage++;
if(currentPage==totalPages){
$("#next").hide();
if(totalRecords%recordsPerPage!=0){
recordsToFetch=totalRecords%recordsPerPage;
}
else{
recordsToFetch=recordsPerPage;
}
}
else{
$("#next").show();
recordsToFetch=recordsPerPage;
}
if(currentPage==1){
$("#back").hide();
}
else{
$("#back").show();
}
$.get("processRequest.jsp?requestType=getRecords¤tIndex="+currentIndex+"&recordsToFetch="+recordsToFetch,function(data){
var JSONData=JSON.parse(data);
for(i=0;i<recordsToFetch;++i){
$("#div1").append("<p>"+(currentIndex+1)+". "+JSONData.record[i]+"</p>");
currentIndex++;
}
});
$("#page").html("Page "+currentPage+" of "+totalPages);
});
$("#back").click(function(){
$("#div1").html("");
currentPage--;
currentIndex=currentIndex-recordsToFetch-recordsPerPage;
if(currentPage==totalPages){
$("#next").hide();
recordsToFetch=totalRecords%recordsPerPage;
}
else{
$("#next").show();
recordsToFetch=recordsPerPage;
}
if(currentPage==1){
$("#back").hide();
}
else{
$("#back").show();
}
$.get("processRequest.jsp?requestType=getRecords¤tIndex="+currentIndex+"&recordsToFetch="+recordsToFetch,function(data){
var JSONData=JSON.parse(data);
for(i=0;i<recordsToFetch;++i){
$("#div1").append("<p>"+(currentIndex+1)+". "+JSONData.record[i]+"</p>");
currentIndex++;
}
});
$("#page").html("Page "+currentPage+" of "+totalPages);
});
});
</script>
<div id="div1"></div><br/>
<button id="back">Back</button>
<button id="next">Next</button>
<p id="page"></p>
</body>
</html>processRequest.jsp
This page procedure demand by getting information.
<%@page import="com.PaginationDAO"%>
<%
String req=request.getParameter("requestType");
String data="";
if(req.equals("countRecords")){
data=PaginationDAO.countRecords();
}
if(req.equals("getRecords")){
String start=request.getParameter("currentIndex");
String total=request.getParameter("recordsToFetch");
data=PaginationDAO.getRecords(start, total);
}
out.print(data);
%>DBConnection.java
Contains code for database association.
package com;
import java.sql.Connection;
import java.sql.DriverManager;
public class DBConnection {
final static String URL="localhost:3306/";
final static String DATABASE="pagination";
final static String USER="root";
final static String PASS="root";
final static String DATA_TABLE="data";
final static String ID_COL="id";
final static String NAME_COL="name";
public static Connection getCon(){
Connection con=null;
try{
Class.forName("com.mysql.jdbc.Driver");
con=DriverManager.getConnection("jdbc:mysql://"+URL+DATABASE,USER,PASS);
}catch(Exception e){
e.printStackTrace();
}
return con;
}
}PaginationDAO.java
Get information from the database and convert it into JSON position.
package com;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
public class PaginationDAO {
public static String countRecords(){
String query="select count(*) from "+DBConnection.DATA_TABLE;
int count=0;
JSONObject obj=new JSONObject();
try{
Connection con=DBConnection.getCon();
PreparedStatement ps=con.prepareStatement(query);
ResultSet rs=ps.executeQuery();
if(rs.next()){
count=rs.getInt(1);
obj.put("count",count);
}
}catch(Exception e){
e.printStackTrace();
}
return obj.toString();
}
public static String getRecords(String start,String total){
String query="select * from "+DBConnection.DATA_TABLE+" limit "+start+","+total;
JSONObject obj=new JSONObject();
JSONArray arr=new JSONArray();
try{
Connection con=DBConnection.getCon();
PreparedStatement ps=con.prepareStatement(query);
ResultSet rs=ps.executeQuery();
while(rs.next()){
arr.add(rs.getString(DBConnection.NAME_COL));
}
obj.put("record",arr);
}catch(Exception e){
e.printStackTrace();
}
return obj.toString();
}
}Database
The database table that I have utilized has the following structure.
In this example, I am getting just 5 records one after another from the database and afterwards showing them. You can change the number of records per page as indicated by you.
Download the task from underneath connect. It likewise contains the database reinforcement document.
On the off chance that you are confronting any trouble, at that point don’t hesitate to ask it by remarking underneath.