Pagination from servlet results using jquery (no php or jsp)

Question

I have an html page (results.html) which shows all the contents of a table retrieved with a servlet using an ajax call. I need the result to be paginated.

Result of the servlet is printed in the div below. I want this to be paginated using jquery, i don't want to refresh the whole page

results.html

<div id="result2" class="container" style="margin: auto;"></div>

fetch.js

function GetCategory(category) {
 j.ajax({
  type : 'POST',
  url : '../auctionsDisplay',
  data : {
   "type" : "1",
   "category" : category
  },
  success : function(data) {
   j("#result2").html(data);
  }
 });

}

And this is my doPost in the servlet fetchServ.java

protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter out = response.getWriter();
    String result = "";

    try {
        Connection con = DBConnection.getCon();

        String type=request.getParameter("type");
        String category = request.getParameter("category");



        ResultSet rs=null;
        PreparedStatement ps;
        String query;

        query = "select id, name, price from " + category;
        ps = con.prepareStatement(query);
        rs = ps.executeQuery();


        int i;
        result = "";
        boolean flag = rs.next();
        result += "<div class='container'><div class='row'><h1>"+category+"</h1></div>";
        while (flag) {  
            result+="<div class='row'>";
            i = 0;
            while (i < 4 && flag) {
                ps = con.prepareStatement("select highestBidder, ends from auctions where itemId=?");
                ps.setString(1, rs.getString("id"));

                ResultSet rs2 = ps.executeQuery();
                rs2.next();
                String price = rs.getString("price");
                if (rs2.getString("highestBidder") != null)
                    price = rs2.getString("highestBidder");
                String id=rs.getString("id");
                result += "<div class='col-md-3' portfolio-item>";
                result += "<div class='w3-container w3-hover-shadow w3-center'>" + "<h2 style='height:60px'>" + rs.getString("name")
                        + "</h2><div class='w3-card-20' style='width:100%'>"
                        + "<input id="+id+" type='image' src='../img/portfolio/w3.jpg' data-toggle='modal' "
                        + "data-target='#MoreInfo'style='width:90%;'>"
                        + "<div class='w3-container w3-center responsive'>"
                        + "<p style='padding:5px;'>Highest Bid: " + price + "\u20ac <br> " + "Ends at: "
                        + rs2.getString("ends") + "<p></div></div></div></div>";

                flag = rs.next();
                i++;
            }

            result += "</div>";
        }
        result+="</div>";

    } catch (Exception e) {
        e.printStackTrace();
    }

    out.println(result);
}

I have tried a lot of things but they did not work in accordance with my code I would appreciate some code (working code if possible) or accurate instructions on how to achieve pagination through jquery. (yes i can change my code and place the items in a table for example)

score 0 · Accepted Answer · edited May 23 '17 at 12:33

I can't give you working code, so please stop reading if that is what you want.

If you're using MySQL you can pass the limit and offset variables to your query Limit and offset examples

You would modify your jquery by passing those variables via your ajax request. Limit being the number of rows/page and the offset being the page number times the rows/page. So, if you were on page 3 and the rows/page were 10, you would set the offset to 21st row (which is the 20th row for MySQL, since it counts from 0).

$('.pagination').click(function(e){
    e.preventDefault(); //prevent default click behavior for a link
    limit = 10;                         //hard code the limit (rows/page)
    offset = $(this).data('offset');    //get the offset for the link clicked
    $.ajax({                            //ajax
        type : 'POST',
        url : '../auctionsDisplay',
        data : {
        "type"      : "1",
        "category"  : category,
        "limit"     : limit,        //set limit
        "offset"    : offset        //set offset
    }
    .done(function(){               //success is deprecated, use done
        $("#result2").html(data);
    })
    .fail(function(jqXHR){          //dump the info to the console (hit f12 to see that in a browser)
        console.log(jqXHR);
        alert("aw damn, something bad happened");
    })
    .always(function(){             //this always happens, doesn't matter if it hits done or fail
        alert("I always happen, done or fail, rain or shine.  You can remove me.");
    })
});
})

Examples of pagination links: <a href="#" class="pagination" data-offset="0">1</a> | <a href="#" class="pagination" data-offset="10">2</a> | <a href="#" class="pagination" data-offset="20">3</a> | <a href="#" class="pagination" data-offset="30">4</a>

I've hard coded 10 as the rows/page (limit), but you can make that whatever.

Here is what the query might look like select id, name, price from " + category + " LIMIT 10, 0"

That would get you the first 10 results of your query.

See this for MSSQL version of limit and offset.

Don't know why you have jQuery aliased to "j", so I left it as dollar sign, but replace the dollar signs with "j" if that is required in your environment.

Pagination from servlet results using jquery (no php or jsp)

1 Answers1