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

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) { 
 
\t j.ajax({ 
 
\t \t type : 'POST', 
 
\t \t url : '../auctionsDisplay', 
 
\t \t data : { 
 
\t \t \t "type" : "1", 
 
\t \t \t "category" : category 
 
\t \t }, 
 
\t \t success : function(data) { 
 
\t \t \t j("#result2").html(data); 
 
\t \t } 
 
\t }); 
 

 
}

這是我的doPost在se rvlet 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分頁。 （是的，我可以更改我的代碼，並將項目放在表中）

Answer 1

我不能給你工作代碼，所以請停止閱讀，如果這是你想要的。

如果你使用MySQL，你可以通過限制和偏移變量來查詢Limit and offset examples

你會被通過你的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個結果。

See this for MSSQL限制和偏移的版本。

不知道爲什麼你有jQuery別名爲「j」，所以我把它留作美元符號，但如果你的環境中需要用「j」代替美元符號。