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

About these ads
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