Ultimate Paging practice through JQuery & Ajax.

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;" />
                    &nbsp;
                    <select name="size" id="size">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                    </select>
                    &nbsp;
                    <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">&laquo;</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">&raquo;</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 :
Paging Output

Special Thanks to Rishita Parekh for Paging Logic

This entry was posted in JQuery, JSP, Servlet. Bookmark the permalink.

One Response to Ultimate Paging practice through JQuery & Ajax.

  1. Roberto says:

    Hi
    Where can I download the jQuery library, or the complete example?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s