使用jquery对servlet结果进行分页(没有php或jsp)

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

本文关键字：没有 php jsp 分页 jquery servlet 结果 使用      更新时间：2023-09-26

我有一个html页面(results.html)，其中显示了servlet使用ajax调用检索到的表的所有内容。我需要对结果进行分页

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中的doPost 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);
}

我已经尝试了很多事情，但他们没有按照我的代码工作我希望提供一些代码(如果可能的话，可以工作的代码)或关于如何通过jquery实现分页的准确说明。(是的，我可以改变我的代码，并在表中放置项目，例如)

我不能给你工作代码，所以如果这是你想要的，请停止阅读。

如果你正在使用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"

相关文章：