Dùng Database theo JDBC
http://localhost:8080/Shop_Bonfire/index.jsp?pages=3
http://localhost:8080/Shop_Bonfire/index.jsp?pages=3
Bài 1:Hiển thị sản phẩm > index.jsp
Java 2016
<%
int first = 0, last = 0, pages = 1;
if (request.getParameter("pages") != null) {
pages = (int) Integer.parseInt(request.getParameter("pages"));
}
//Lấy tổng sản phẩm trong data bằng query select count(id) from name_table với JDBC Connect
int total = new ShopDAO().getCount();
if (total <= 4) {
first = 0;
last = total;
} else {
first = (pages - 1) * 4;
last = 4;
}
//Lấy ra danh sách sản phẩm
List<Shop> list = new ShopDAO().getShop(first, last);
for (Shop item : list) {
%>
//Ở đây là chỗ cần lặp sản phẩm cần hiển thị
//Ở bài này sẽ hiển thi 4 sản phẩm trên 1 trang
//Nếu nhiều sản phẩm thì sẽ phân trang sang trang 2 3 ...
//Ví dụ: hiển thị tên sản phẩm <span><%=item.getName() %> </span>
<%}%>
http://localhost:8080/Shop_Bonfire/index.jsp?pages=2
Phần nút phân trang > index.jsp
Java 2016
<ul class="start"> <% //Button Previous int back = 0; if (pages == 0 || pages == 1) { back = 1;//Luon la page 1 } else { back = pages - 1;//Neu pages tu 2 tro len thi back tru 1 } %> <li ><a href="index.jsp?pages=<%=back%>"><i></i></a></li> <% //Button Number pages int loop = 0, num = 0; if ((total / 4) % 2 == 0) { num = total / 4; } else { num = (total + 1) / 4; } //Nếu total lẻ thêm 1 if (total % 2 != 0) { loop = (total / 4) + 1; } else { //Nếu total chẵn nhỏ hơn fullpage và # fullPage thì thêm 1 if (total < (num * 4) + 4 && total != num * 4) { loop = (total / 4) + 1; } else { //Nếu bằng fullPage thì không thêm loop = (total / 4); } } //Lap so pages for (int i = 1; i <= loop; i++) {%> <% if (pages == i) {%> <li><span><a href="index.jsp?pages=<%=i%>"><%=i%></a></span></li> <%} else {%> <li class="arrow"><a href="index.jsp?pages=<%=i%>"><%=i%></a> </li> <%} }%> <% //Button Next int next = 0; //Nếu total lẻ if (total % 2 != 0) { if (pages == (total / 4) + 1) { next = pages;//Khong next } else { next = pages + 1;//Co next } } else { //Nếu total chẵn nhỏ hơn fullpage //Và không fullPage thì thêm 1 if (total < (num * 4) + 4 && total != num * 4) { if (pages == (total / 4) + 1) { next = pages;//Khong next } else { next = pages + 1;//Co next } } else { //Nếu fullPage đến trang cuối dừng //Chưa tới trang cuối thì được next if (pages == (total / 4)) { next = pages;//Khong next } else { next = pages + 1;//Co next } } } %> <li ><a href="index.jsp?pages=<%=next%>"><i class="next"></i></a></li> </ul> </div>
ShopDAO.java
Java 2016
//Pages number 1->4 or 5->8 ..
public ArrayList<Shop> getShop(int a, int b) {
Connection conn = DBUtil.getConnection();
ArrayList<Shop> list = new ArrayList();
String sql = "SELECT * FROM product.shop Limit ?,?";
try {
PreparedStatement stmt = conn.prepareStatement(sql);
stmt.setInt(1, a);
stmt.setInt(2, b);
ResultSet rs = stmt.executeQuery();
while (rs.next()) {
String id = rs.getString("id");
String name = rs.getString("name");
String image = rs.getString("image");
float price = rs.getFloat("price");
Shop s = new Shop(id, name, image, price);
list.add(s);
}
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
//Test show
// public static void main(String[] args) {
// ShopDAO s = new ShopDAO();
// System.out.println(s.getShop());
// }
//Total product number
public int getCount() {
Connection conn = DBUtil.getConnection();
ArrayList<Shop> list = new ArrayList();
String sql = "SELECT count(id) FROM product.shop";
int count = 0;
try {
PreparedStatement stmt = conn.prepareStatement(sql);
ResultSet rs = stmt.executeQuery();
while (rs.next()) {
count = rs.getInt(1);
}
} catch (SQLException e) {
e.printStackTrace();
}
return count;
}
//Test count product
// public static void main(String[] args) {
// ShopDAO s = new ShopDAO();
// System.out.println(s.getCount());
// }
Phân trang bằng (JQuery + Javascript)/** jQuery Pagination plugin **/
Phân trang bằng (JQuery + Javascript)
Java 2017
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Pagination plugin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js" ></script>
<!-- JS tạo nút bấm di chuyển trang start -->
<script src="http://1892.yn.lt/blogger/JQuery/Pagging/js/jquery.twbsPagination.js" type="text/javascript"></script>
<!-- JS tạo nút bấm di chuyển trang end -->
<script type="text/javascript">
$(function () {
var pageSize = 6; // Hiển thị 6 sản phẩm trên 1 trang
showPage = function (page) {
$(".contentPage").hide();
$(".contentPage").each(function (n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(1);
///** Cần truyền giá trị vào đây **///
var totalRows = 40; // Tổng số sản phẩm hiển thị
var btnPage = 5; // Số nút bấm hiển thị di chuyển trang
var iTotalPages = Math.ceil(totalRows / pageSize);
var obj = $('#pagination').twbsPagination({
totalPages: iTotalPages,
visiblePages: btnPage,
onPageClick: function (event, page) {
console.info(page);
showPage(page);
}
});
console.info(obj.data());
});
</script>
<style>
///** CSS căn id pagination ra giữa màn hình **///
#pagination {
display: flex;
display: -webkit-flex; /* Safari 8 */
flex-wrap: wrap;
-webkit-flex-wrap: wrap; /* Safari 8 */
justify-content: center;
-webkit-justify-content: center;
}
</style>
</head>
<body style="width: 500px; margin:auto;">
<!-- Hiên thị nút bấm -->
<ul id="pagination"></ul>
<!-- Hiển thị sản phẩm -->
<div class="contentPage">1 I have some content</div>
<div class="contentPage">2 I have some content</div>
<div class="contentPage">3 I have some content</div>
<div class="contentPage">4 I have some content</div>
<div class="contentPage">5 I have some content</div>
<div class="contentPage">6 I have some content</div>
<div class="contentPage">7 I have some content</div>
<div class="contentPage">8 I have some content</div>
<div class="contentPage">9 I have some content</div>
<div class="contentPage">10 I have some content</div>
<div class="contentPage">11 I have some content</div>
<div class="contentPage">12 I have some content</div>
<div class="contentPage">13 I have some content</div>
<div class="contentPage">14 I have some content</div>
<div class="contentPage">15 I have some content</div>
<div class="contentPage">16 I have some content</div>
<div class="contentPage">17 I have some content</div>
<div class="contentPage">18 I have some content</div>
<div class="contentPage">19 I have some content</div>
<div class="contentPage">20 I have some content</div>
<div class="contentPage">21 I have some content</div>
<div class="contentPage">22 I have some content</div>
<div class="contentPage">23 I have some content</div>
<div class="contentPage">24 I have some content</div>
<div class="contentPage">25 I have some content</div>
<div class="contentPage">26 I have some content</div>
<div class="contentPage">27 I have some content</div>
<div class="contentPage">28 I have some content</div>
<div class="contentPage">29 I have some content</div>
<div class="contentPage">30 I have some content</div>
<div class="contentPage">31 I have some content</div>
<div class="contentPage">32 I have some content</div>
<div class="contentPage">33 I have some content</div>
<div class="contentPage">34 I have some content</div>
<div class="contentPage">35 I have some content</div>
<div class="contentPage">36 I have some content</div>
<div class="contentPage">37 I have some content</div>
<div class="contentPage">38 I have some content</div>
<div class="contentPage">39 I have some content</div>
<div class="contentPage">40 I have some content</div>
</body>
</html>
Download (pagging-JQuery.zip)
mình đã làm theo, có chia thành nhiều page nhưng mà là page nào cũng hiện tất cả sản phẩm
ReplyDeleteOh vậy à. do bài viết lâu quá rồi nên giờ check lại mình cũng ko tiện. nhưng nếu cách call api ko được thì bạn làm cách (JQuery + Javascript) trên client chắc chắn được nếu như làm demo project nhỏ
Delete