使用jQuery從servlet結果分頁（不使用php或jsp）

Question

我有一個html頁面（results.html），其中顯示了使用ajax調用通過servlet檢索的表的所有內容。 我需要對結果進行分頁。

Servlet的結果將顯示在下面的div中。 我想使用jQuery對它進行分頁，我不想刷新整個頁面

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); } }); } 

這是我在servlet fetchServ.java中的 doPost

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);
}

我已經嘗試了很多方法，但是它們並沒有按照我的代碼工作，我希望您能通過一些代碼（如果可能，可以使用工作代碼）或關於如何通過jquery實現分頁的准確說明進行操作。 （是的，例如，我可以更改代碼並將其放置在表格中）

Answer 1

我無法提供工作代碼，因此，如果需要的話，請停止閱讀。

如果您使用的是MySQL，則可以將limit和offset變量傳遞給查詢Limit和offset示例

您可以通過ajax請求傳遞這些變量來修改jquery。 限制是行數/頁數，偏移量是頁數乘以行數/頁數。 因此，如果您在第3頁上，而每行的行數是10，則可以將偏移設置為第21行（對於MySQL，它是第20行，因為它從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.");
    })
});
})

分頁鏈接的示例： <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>

我已經將10硬編碼為行數/頁數（限制），但是您可以將其設為任意值。

查詢如下所示： select id, name, price from " + category + " LIMIT 10, 0"

那將使您獲得查詢的前10個結果。

有關限制和偏移量的MSSQL版本， 請參見此內容 。

不知道為什么您的jQuery別名為“ j”，所以我將其保留為美元符號，但是如果您的環境需要，則將美元符號替換為“ j”。