JSP page
<%--
Document : index
Created on : Jan 31, 2011, 11:13:55 AM
Author : TaherT
--%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pagination Through JQuery Ajax</title>
<link href="home.css" rel="stylesheet" type="text/css" />
<link href="theme_1.css" rel="stylesheet" type="text/css" />
<script src="jQuery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="jQuery/jquery.validate.js"type="text/javascript"></script>
<script type="text/javascript">
function chkdisble(pageNo){
$('#dispPage').val(Number(pageNo));
if(parseInt($('#pageNo').val(), 10) != 1){
$('#btnFirst').removeAttr("disabled");
$('#btnFirst').css('color', '#333');
}
if(parseInt($('#pageNo').val(), 10) == 1){
$('#btnFirst').attr("disabled", "true");
$('#btnFirst').css('color', 'gray');
}
if(parseInt($('#pageNo').val(), 10) == 1){
$('#btnPrevious').attr("disabled", "true")
$('#btnPrevious').css('color', 'gray');
}
if(parseInt($('#pageNo').val(), 10) > 1){
$('#btnPrevious').removeAttr("disabled");
$('#btnPrevious').css('color', '#333');
}
if(parseInt($('#pageNo').val(), 10) == parseInt($('#totalPages').val())){
$('#btnLast').attr("disabled", "true");
$('#btnLast').css('color', 'gray');
}
else{
$('#btnLast').removeAttr("disabled");
$('#btnLast').css('color', '#333');
}
if(parseInt($('#pageNo').val(), 10) == parseInt($('#totalPages').val())){
$('#btnNext').attr("disabled", "true")
$('#btnNext').css('color', 'gray');
}
else{
$('#btnNext').removeAttr("disabled");
$('#btnNext').css('color', '#333');
}
}
</script>
<script type="text/javascript">
$(function() {
$('#btnFirst').click(function() {
var totalPages=parseInt($('#totalPages').val(),10);
if(totalPages>0 && $('#pageNo').val()!="1")
{
$('#pageNo').val("1");
loadTable();
$('#dispPage').val("1");
}
});
});
</script>
<script type="text/javascript">
$(function() {
$('#btnLast').click(function() {
var totalPages=parseInt($('#totalPages').val(),10);
if(totalPages>0)
{
$('#pageNo').val(totalPages);
loadTable();
$('#dispPage').val(totalPages);
}
});
});
</script>
<script type="text/javascript">
$(function() {
$('#btnNext').click(function() {
var pageNo=parseInt($('#pageNo').val(),10);
var totalPages=parseInt($('#totalPages').val(),10);
if(pageNo <= totalPages) {
$('#pageNo').val(Number(pageNo)+1);
loadTable();
$('#dispPage').val(Number(pageNo)+1);
$('#btnPrevious').removeAttr("disabled");
}
});
});
</script>
<script type="text/javascript">
$(function() {
$('#btnPrevious').click(function() {
var pageNo=$('#pageNo').val();
if(parseInt(pageNo, 10) > 1)
{
$('#pageNo').val(Number(pageNo) - 1);
loadTable();
$('#dispPage').val(Number(pageNo) - 1);
}
});
});
</script>
<script type="text/javascript">
$(function() {
$('#btnGoto').click(function() {
var pageNo=parseInt($('#dispPage').val(),10);
var totalPages=parseInt($('#totalPages').val(),10);
if(pageNo > 0)
{
if(pageNo <= totalPages) {
$('#pageNo').val(Number(pageNo));
loadTable();
$('#dispPage').val(Number(pageNo));
}
}
});
});
</script>
<script type="text/javascript">
function loadTable()
{
$.post("<%=request.getContextPath()%>/DataServlet", {pageNo: $("#pageNo").val(),size: $("#size").val()}, function(j){
$('#resultTable').find("tr:gt(0)").remove();
$('#resultTable tr:last').after(j);
if($('#noRecordFound').val() == "noRecordFound"){
$('#pagination').hide();
}else{
$('#pagination').show();
}
if($("#totalPages").val() == 1){
$('#btnNext').attr("disabled", "true");
$('#btnLast').attr("disabled", "true");
}else{
$('#btnNext').removeAttr("disabled");
$('#btnLast').removeAttr("disabled");
}
$("#pageNoTot").html($("#pageNo").val());
chkdisble($("#pageNo").val());
$("#pageTot").html($("#totalPages").val());
});
}
</script>
<link href="jQuery/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" cellspacing="0" id="resultTable" class="tableList_3">
<tr>
<th align="center">Serial. No.</th>
<th align="center">Student Name.</th>
<th align="center">Student Std.</th>
<th align="center">Address.</th>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="pagination" class="pagging_1">
<tr>
<td align="left" width="30%">Page <span id="pageNoTot">1</span> of <span id="pageTot">10</span></td>
<td align="center" width="40%"><input name="textfield3" type="text" id="dispPage" value="1" class="formTxtBox_1" style="width:20px;" />
<select name="size" id="size">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<label class="formBtn_1">
<input type="submit" name="button" id="btnGoto" id="button" value="Go To Page" />
</label></td>
<td class="prevNext-container" width="30%">
<ul>
<li><font size="3">«</font> <a href="javascript:void(0)" disabled id="btnFirst">First</a></li>
<li><font size="3">‹</font> <a href="javascript:void(0)" disabled id="btnPrevious">Previous</a></li>
<li><a href="javascript:void(0)" id="btnNext">Next</a> <font size="3">›</font></li>
<li><a href="javascript:void(0)" id="btnLast">Last</a> <font size="3">»</font></li>
</ul>
</td>
</tr>
</table>
<input type="hidden" id="pageNo" value="1"/>
<script type="text/javascript">
loadTable();
</script>
</body>
</html>
Data Class (StudentMaster.java)
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package test.pojo;
import java.util.ArrayList;
import java.util.List;
/**
*
* @author TaherT
*/
public class StudentMaster {
public StudentMaster() {
}
String stdName;
String stdStd;
String stdAddress;
public String getStdAddress() {
return stdAddress;
}
public void setStdAddress(String stdAddress) {
this.stdAddress = stdAddress;
}
public String getStdName() {
return stdName;
}
public void setStdName(String stdName) {
this.stdName = stdName;
}
public String getStdStd() {
return stdStd;
}
public void setStdStd(String stdStd) {
this.stdStd = stdStd;
}
public List<StudentMaster> getStudents() {
List<StudentMaster> list = new ArrayList<StudentMaster>();
if (list.isEmpty()) {
for (int i = 1; i <= 5; i++) {
list.add(new StudentMaster("Taher " + i, "10", "Ahmedabad"));
list.add(new StudentMaster("Rishita " + i, "12", "Baroda"));
list.add(new StudentMaster("Sanjay " + i, "12", "Kalol"));
list.add(new StudentMaster("Parag " + i, "11", "Gandhinagar"));
list.add(new StudentMaster("Rajesh " + i, "9", "Verawal"));
}
}
return list;
}
public List<StudentMaster> getPagedStudents(int pageNo, int recordOffset) {
List<StudentMaster> list = getStudents();
List<StudentMaster> list2 = new ArrayList<StudentMaster>();
int j = 0;
int no = pageNo;
if (no == 1) {
j = 1;
} else {
if (recordOffset == 30) {
j = ((no - 1) * 30) + 1;
} else if (recordOffset == 20) {
j = ((no - 1) * 20) + 1;
} else {
j = ((no - 1) * 10) + 1;
}
}
for(int i=j-1;i<(j-1)+recordOffset;i++){
if(list.size() >i){
list2.add(list.get(i));
}
}
return list2;
}
public StudentMaster(String stdName, String stdStd, String stdAddress) {
this.stdName = stdName;
this.stdStd = stdStd;
this.stdAddress = stdAddress;
}
}
Servlet (DataServlet.java)
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package test.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import test.pojo.StudentMaster;
/**
*
* @author TaherT
*/
public class DataServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String strPageNo = request.getParameter("pageNo");
String styleClass = "";
int pageNo = Integer.parseInt(strPageNo);
String strOffset = request.getParameter("size");
int recordOffset = Integer.parseInt(strOffset);
StudentMaster studentMaster = new StudentMaster();
List<StudentMaster> studentMasters = studentMaster.getPagedStudents(pageNo, recordOffset);
if (!studentMasters.isEmpty()) {
for (int i = 0; i < studentMasters.size(); i++) {
if(i%2==0){
styleClass = "bgColor-white";
}else{
styleClass = "bgColor-Green";
}
out.print("<tr class='"+styleClass+"'>");
out.print("<td align=\"center\">" + ((pageNo - 1) * 10 + (i + 1)) + "</td>");
out.print("<td align=\"center\">" + studentMasters.get(i).getStdName() + "</td>");
out.print("<td align=\"center\">" + studentMasters.get(i).getStdStd() + "</td>");
out.print("<td align=\"center\">" + studentMasters.get(i).getStdAddress() + "</td>");
out.print("</tr>");
}
} else {
out.print("<tr>");
out.print("<td id=\"noRecordFound\" value=\"noRecordFound\" class=\"t-align-left\" style=\"color: red;font-weight: bold\" colspan=\"6\">No Record Found!</td>");
out.print("</tr>");
}
int totalPages = 1;
if (studentMasters.size() > 0) {
int rowCount = studentMaster.getStudents().size();
totalPages = (int) Math.ceil(Math.ceil(rowCount)/ recordOffset);
if (totalPages == 0) {
totalPages = 1;
}
}
out.print("<input type=\"hidden\" id=\"totalPages\" value=\"" + totalPages + "\">");
} finally {
out.close();
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
@Override
public String getServletInfo() {
return "Short description";
}
}
Output :
Special Thanks to Rishita Parekh for Paging Logic
Hi
Where can I download the jQuery library, or the complete example?