Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
7.4 kB
2
Indexable
Never
<%@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>