AJAX – Just Tech Review

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.

JSP Pagination Example $(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&currentIndex="+currentIndex+"&recordsToFetch="+recordsToFetch,function(data){ var JSONData=JSON.parse(data); for(i=0;i "+(currentIndex+1)+". "+JSONData.record[i]+"

"); 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&currentIndex="+currentIndex+"&recordsToFetch="+recordsToFetch,function(data){ var JSONData=JSON.parse(data); for(i=0;i "+(currentIndex+1)+". "+JSONData.record[i]+"

"); 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&currentIndex="+currentIndex+"&recordsToFetch="+recordsToFetch,function(data){ var JSONData=JSON.parse(data); for(i=0;i "+(currentIndex+1)+". "+JSONData.record[i]+"

"); currentIndex++; } }); $("#page").html("Page "+currentPage+" of "+totalPages); }); }); Back Next

processRequest.jsp

This page procedure demand by getting information.

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.

Download Project

On the off chance that you are confronting any trouble, at that point don't hesitate to ask it by remarking underneath.