Skip to content
This repository has been archived by the owner on May 31, 2024. It is now read-only.

Commit

Permalink
Merge pull request #139 from hardingadonis/nghia-paging-for-order-page
Browse files Browse the repository at this point in the history
Add paging for order page
  • Loading branch information
hardingadonis authored Mar 3, 2024
2 parents 97021e1 + cadb1df commit c2b66fb
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 49 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@

@WebServlet(name = "OrderServlet", urlPatterns = {"/order"})
public class OrderServlet extends HttpServlet {

final static int LIMIT = 10;

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
Expand All @@ -19,12 +21,26 @@ protected void doGet(HttpServletRequest request, HttpServletResponse response)
response.setContentType("text/html; charset=UTF-8");

List<Order> orders = Singleton.orderDAO.getAll();
int count = Singleton.orderDAO.count();

List<Order> reversedOrders = orders.stream()
.sorted(Comparator.comparing(Order::getID).reversed())
.collect(Collectors.toList());
int pageNum = getInteger(request.getParameter("page"));
int offset = pageNum;

request.setAttribute("orders", reversedOrders);
if (offset == -1){
offset = 0;
pageNum = 1;
} else {
offset = (offset - 1)*LIMIT;
}

List<Order> orderPaging = Singleton.orderDAO.pagination(offset, LIMIT);
int total = Singleton.orderDAO.totalPages(LIMIT);

request.setAttribute("numOfOrder", count);
request.setAttribute("currentPage", pageNum);
request.setAttribute("totalPage", total);
request.setAttribute("limit", LIMIT);
request.setAttribute("orders", orderPaging);
request.setAttribute("page", "order");

request.getRequestDispatcher("/view/jsp/management/order/order.jsp").forward(request, response);
Expand All @@ -34,4 +50,15 @@ protected void doGet(HttpServletRequest request, HttpServletResponse response)
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}

private static int getInteger(String parameter){
if (parameter == null) {
return -1;
}
try {
return Integer.parseInt(parameter);
} catch (NumberFormatException e) {
return -1;
}
}
}
4 changes: 1 addition & 3 deletions src/main/webapp/view/assets/js/validate/validator.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

//Object 'Validator'

function Validator(options) {
Expand Down Expand Up @@ -250,5 +249,4 @@ function updateCKEditor() {
if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances['description']) {
CKEDITOR.instances['description'].updateElement();
}
}

}
112 changes: 70 additions & 42 deletions src/main/webapp/view/jsp/management/order/order.jsp
Original file line number Diff line number Diff line change
Expand Up @@ -34,57 +34,85 @@
<div class="card-header d-xxl-flex justify-content-between align-items-center align-items-xxl-center py-3">
<p class="text-primary m-0 fw-bold">Quản lý đơn hàng</p><a class="btn btn-primary btn-sm" role="button" href="<%=request.getContextPath()%>/add-order">Thêm đơn hàng</a>
</div>
<div class="card-body">
<div class="table-responsive table mt-2" id="dataTable" role="grid" aria-describedby="dataTable_info">
<table class="table my-0" id="dataTable">
<thead>
<tr>
<th>Mã đặt hàng</th>
<th>Tên khách hàng</th>
<th>Tổng tiền</th>
<th>Thao tác</th>
</tr>
</thead>
<c:forEach items="${requestScope.orders}" var="order">
<tbody>
<c:if test="${requestScope.orders != null && !requestScope.order.isEmpty()}">
<div class="card-body">
<div class="table-responsive table mt-2" id="dataTable" role="grid" aria-describedby="dataTable_info">
<table class="table my-0" id="dataTable">
<thead>
<tr>
<td><img class="rounded-circle me-2" width="40" height="40" src="<%=request.getContextPath()%>/view/assets/images/icons/order.png">${order.code}</td>
<td>${order.customer.name}</td>
<td>${order.getTotalToString()}</td>
<td class="text-start">
<a class="btn btn-primary btn-sm" role="button" data-bs-toggle="tooltip" data-bss-tooltip="" style="margin: 2px;" title="Thông tin chi tiết" href="<%=request.getContextPath()%>/order-detail?id=${order.ID}">
<i class="la la-info-circle"></i>
</a>
<th width = '30%'>Mã đặt hàng</th>
<th width = '30%'>Tên khách hàng</th>
<th width = '30%'>Tổng tiền</th>
<th width = '10%'>Thao tác</th>
</tr>
</thead>
<c:forEach items="${requestScope.orders}" var="order">
<tbody>
<tr>
<td><img class="rounded-circle me-2" width="40" height="40" src="<%=request.getContextPath()%>/view/assets/images/icons/order.png">${order.code}</td>
<td>${order.customer.name}</td>
<td>${order.getTotalToString()} ₫</td>
<td class="text-start">
<a class="btn btn-primary btn-sm" role="button" data-bs-toggle="tooltip" data-bss-tooltip="" style="margin: 2px;" title="Thông tin chi tiết" href="<%=request.getContextPath()%>/order-detail?id=${order.ID}">
<i class="la la-info-circle"></i>
</a>

<a class="btn btn-warning btn-sm" role="button" data-bs-toggle="tooltip" data-bss-tooltip="" style="margin: 2px;" title="Chỉnh sửa" href="<%=request.getContextPath()%>/update-order?id=${order.ID}">
<i class="la la-edit"></i>
</a>

<a class="btn btn-warning btn-sm" role="button" data-bs-toggle="tooltip" data-bss-tooltip="" style="margin: 2px;" title="Chỉnh sửa" href="<%=request.getContextPath()%>/update-order?id=${order.ID}">
<i class="la la-edit"></i>
</td>

</tr>

</tbody>
</c:forEach>
</table>
</div>
<div class="row">
<div class="col-md-6 align-self-center">
<p id="dataTable_info" class="dataTables_info" role="status" aria-live="polite">
Hiển thị ${requestScope.currentPage * requestScope.limit < requestScope.numOfOrder ? requestScope.currentPage * requestScope.limit : requestScope.numOfOrder}
trên ${requestScope.numOfOrder} đơn hàng
</p>
</div>
<div class="col-md-6">
<nav class="d-lg-flex justify-content-lg-end dataTables_paginate paging_simple_numbers">
<ul class="pagination">
<li class="page-item ${requestScope.currentPage == 1 ? 'disabled' : ''}">
<a class="page-link" aria-label="Previous" href="<%=request.getContextPath()%>/order?page=${requestScope.currentPage - 1}">
<span aria-hidden="true">«</span>
</a>
</li>

</td>
<c:forEach var="i" begin="1" end="${requestScope.totalPage}">

</tr>
<li class="page-item ${i == requestScope.currentPage ? 'active' : ''}">
<a class="page-link" href="<%=request.getContextPath()%>/order?page=${i}">${i}</a>
</li>

</tbody>
</c:forEach>
</table>
</div>
<div class="row">
<div class="col-md-6 align-self-center">
<p id="dataTable_info" class="dataTables_info" role="status" aria-live="polite">Hiển thị 1 trong 1 đơn hàng</p>
</c:forEach>

<li class="page-item ${requestScope.currentPage == requestScope.totalPage ? 'disabled' : ''}">
<a class="page-link" aria-label="Next" href="<%=request.getContextPath()%>/order?page=${requestScope.currentPage + 1}">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-md-6">
<nav class="d-lg-flex justify-content-lg-end dataTables_paginate paging_simple_numbers">
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" aria-label="Previous" href="<%=request.getContextPath()%>#"><span aria-hidden="true">«</span></a></li>
<li class="page-item active"><a class="page-link" href="<%=request.getContextPath()%>#">1</a></li>
<li class="page-item"><a class="page-link" href="<%=request.getContextPath()%>#">2</a></li>
<li class="page-item"><a class="page-link" href="<%=request.getContextPath()%>#">3</a></li>
<li class="page-item"><a class="page-link" aria-label="Next" href="<%=request.getContextPath()%>#"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
</div>
</c:if>
<c:if test="${requestScope.orders == null || requestScope.order.isEmpty()}">
<div class="card-body">
<div class="row">
<h3 style="text-align: center">
Không có đơn hàng nào để quản lí.
</h3>
</div>
</div>
</div>
</c:if>
</div>
</div>
</div>
Expand Down

0 comments on commit c2b66fb

Please sign in to comment.