Untitled
unknown
plain_text
2 years ago
7.4 kB
5
Indexable
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%--
Document : list
Created on : Jun 7, 2023, 4:17:26 PM
Author : PC
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <title>Manager Page</title>
xml
Copy
</head>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
}
.clearfix {
display: flex;
align-items: center;
}
h1 {
display: inline-block;
margin-left: 590px;
font-size: 40px;
font-weight: bold;
}
.back a{
text-decoration: none; /* ẩn dấu gạch chân */
font-size: 25px; /* cỡ chữ */
font-weight: bold; /* in đậm */
color: #000; /* màu chữ */
display: flex; /* sử dụng mô hình flexbox để căn giữa phần tử */
align-items: center; /* căn giữa phần tử theo trục dọc */
margin-left: 10px;
}
.back a:hover{
color:red;
transition: all 0.3s ease 0s;
}
.back i {
font-size: 25x; /* cỡ chữ của biểu tượng */
margin-right: 10px; /* khoảng cách giữa biểu tượng và chữ */
}
a.header-btn {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: all 0.3s ease-in-out;
margin-left: auto;
}
a.header-btn:hover {
background-color: #3e8e41;
transform: translateY(-2px);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}
form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
form input[type="text"],
form input[type="number"],
form select {
padding: 10px;
border-radius: 5px;
border: none;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
width: 100%;
margin-bottom: 10px;
}
form select {
margin-top: 10px;
margin-bottom: 20px;
}
form button[type="submit"] {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
form button[type="submit"]:hover {
background-color: #3e8e41;
}
form div {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
form div label {
flex-basis: 20%;
margin-right: 10px;
text-align: left;
}
form div input {
flex-basis: 70%;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 20px;
text-align: left;
border-bottom: 1px solid #ddd;
font-size: 20px;
}
th {
background-color: #f2f2f2;
}
a.detail{
color: black;
text-decoration: none;
}
a.detail:hover {
color: red;
}
td:nth-child(3)::after {
content: "$";
}
img {
max-width: 100%;
height: auto;
width: 125px; /* Điều chỉnh kích thước chiều rộng của hình ảnh */
height: 125px; /* Điều chỉnh kích thước chiều cao của hình ảnh */
}
.pagination {
float: right;
margin: 0 0 5px;
}
.pagination li a {
border: none;
font-size: 13px;
min-width: 50px;
min-height: 30px;
color: black;
margin: 0 2px;
line-height: 30px;
border-radius: 2px !important;
text-align: center;
padding: 0 6px;
}
.pagination li a:hover {
color: #666;
}
.pagination li.active a, .pagination li.active a.page-link {
background: #03A9F4;
}
.pagination li.active a:hover {
background: #0397d6;
}
.pagination li i {
font-size: 16px;
padding-top: 6px
}
</style>
<body>
<div>
<div class="back">
<a href="/home"> <i class="fa fa-arrow-left" aria-hidden="true"></i>Shop</a>
</div>
<h1> All product of our shop</h1>
<form method="get" action="list-product">
Search: <input type="text" name="search"> <br>
Price: From <input type="number" name="priceFrom"> To <input type="number" name="priceTo"><br>
<select name="sortType">
<option value="order by p_name asc" > Sort by name A-Z</option>
<option value="order by p_name desc" >Sort by name Z-A</option>
<option value="order by price asc" > Sort by price ascending (Low to high)</option>
<option value="order by price desc" >Sort by price decrease (High to low)</option>
</select><br>
<button type="submit">Search</button>
<br>
<br>
<a class="header-btn" href="/add-product">Add new product</a>
<br>
<br>
</form>
<table >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Image</th>
<th>Action</th>
<th>Action</th>
</tr>
</thead>
<tbody class="mid">
<c:forEach var="p" items="${list}">
<tr>
<td>${p.p_id}</td>
<td><a class="detail" href="detail-product?pid=${p.p_id}">${p.p_name}</a></td>
<td>${p.price}</td>
<td><img src="${p.image}"></td>
<td><a class="detail" href="update-product?p_id=${p.p_id}">Update</a></td>
<td><a class="detail" href="delete-product?p_id=${p.p_id}">Delete</a></td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="clearfix">
<c:forEach var="x" begin="1" end="${pageCount}" step="1">
<ul class="pagination">
<li>
<a class="" href="list-product?index=${x}">${x}</a>
</li>
</ul>
</c:forEach>
</div>
</body>
</html>
Đây là code của tôi tại trang home. Ví dụ tôi đang ở trang số 3 thì đường dẫn của tôi là http://localhost:8080/list-product?index=3
Tôi muốn khi index=? sẽ hiển thị nổi bật mục phân trang
<div class="clearfix"> <c:forEach var="x" begin="1" end="${pageCount}" step="1"> <ul class="pagination"> <li> <a class="" href="list-product?index=${x}">${x}</a> </li> </ul> </c:forEach> </div>Editor is loading...