OrderList.html
unknown
plain_text
a year ago
21 kB
0
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar với Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="home.css">
<script src="index.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-warning">
<div class="container">
<div class="col-md-2 brand">
<div class="col-md-12 text-center">
<img src="img/logo.png" alt="ảnh logo" style="max-width: 100%; max-height: 100px;">
<h1 style="font-size: 20px; margin: 0;">Admin</h1>
</div>
</div>
<div class="col-md-8 message-box">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<button class="btn btn-primary btn-large">haha</button>
</div>
<div class="col-md-3">
<button class="btn btn-primary btn-large">kaka</button>
</div>
<div class="col-md-3">
<button class="btn btn-primary btn-large">hihi</button>
</div>
<div class="col-md-3">
<button class="btn btn-primary btn-large">hoho</button>
</div>
</div>
</div>
</div>
<div class="col-md-2 manager-admin">
<div class="col-md-12">
<div class="row text-center align-items-center">
<div class="col-md-6">
<img src="img/icon-user.png" alt="change img admin's" style="width: 50px; height: 50px;">
<p>Hung</p>
</div>
<div class="col-md-6">
<img src="img/icon-logout.png" alt="change" style="width: 50px; height: 50px;">
<p>Logout</p>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<ul class="list-group">
<li class="list-group-item"><a href="UserList.html">UserList</a></li>
<li class="list-group-item"><a href="OrderList.html">OrderList</a></li>
<li class="list-group-item"><a href="ImportSource.html">ImportSource</a></li>
<li class="list-group-item"><a href="homeAdminPage.html">Home</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="add-search-feature">
<div class="row add-search-control ">
<div class="col-md-4">
<button> Add New+</button>
</div>
<div class="col-md-4 show-proper">
<p class="show-proper-p">Show</p>
<div class="show-proper-select">
<select id="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<p class="show-proper-p">Order</p>
</div>
<div class="col-md-4 search-box">
<input type="text" id="tableSearch" placeholder="Tìm kiếm...">
<button id="search-button">Tìm kiếm</button>
</div>
</div>
</div>
<div class="table-content">
<table class="table" id="product-table">
<!-- Header của bảng -->
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Date</th>
<th>Address</th>
<th>Phone</th>
<th>Product</th>
<th>Price</th>
<th>Status</th>
<th>Active</th>
</tr>
</thead>
<tbody id="table-body">
<!-- Bảng dữ liệu sẽ được thêm vào đây -->
<!-- tr gốc -->
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
</div>
</td> <!-- Ô trống -->
<td>1</td>
<td>2023-09-25</td>
<td>600 Nguyen Van Cu extension, An Binh, Ninh Kieu, Can Tho 900000</td>
<td>0917893215</td>
<td>Adidas AlphaBounce - White - size42</td>
<td>300000</td>
<td>
<div class="custom" style="width:200px;">
<select>
<option value="0">Select Status:</option>
<option value="1">Wait</option>
<option value="2">Complete</option>
</select>
</div>
</td>
<td class="d-flex">
<i class="fa-solid fa-trash fa-xl mr-2 mt-2" id="xoaSapXep"
alt="Xóa Sản Phẩm Đã Chọn"></i>
<i class="fa-solid fa-pen-to-square fa-xl mt-2" alt="Chỉnh Sửa"></i>
</td>
<!-- Ô trống -->
</tr>
<!-- Thêm dòng sản phẩm khác tương tự -->
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
</div>
</td> <!-- Ô trống -->
<td>1</td>
<td>2023-09-25</td>
<td>600 Nguyen Van Cu extension, An Binh, Ninh Kieu, Can Tho 900000</td>
<td>0917893215</td>
<td>Adidas AlphaBounce - White - size42</td>
<td>300000</td>
<td>
<div class="custom" style="width:200px;">
<select>
<option value="0">Select Status:</option>
<option value="1">Wait</option>
<option value="2">Complete</option>
</select>
</div>
</td>
<td class="d-flex">
<i class="fa-solid fa-trash fa-xl mr-2 mt-2" id="xoaSapXep"
alt="Xóa Sản Phẩm Đã Chọn"></i>
<i class="fa-solid fa-pen-to-square fa-xl mt-2" alt="Chỉnh Sửa"></i>
</td>
<!-- Ô trống -->
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
</div>
</td> <!-- Ô trống -->
<td>1</td>
<td>2023-09-25</td>
<td>600 Nguyen Van Cu extension, An Binh, Ninh Kieu, Can Tho 900000</td>
<td>0917893215</td>
<td>Adidas AlphaBounce - White - size42</td>
<td>300000</td>
<td>
<div class="custom" style="width:200px;">
<select>
<option value="0">Select Status:</option>
<option value="1">Wait</option>
<option value="2">Complete</option>
</select>
</div>
</td>
<td class="d-flex">
<i class="fa-solid fa-trash fa-xl mr-2 mt-2" id="xoaSapXep"
alt="Xóa Sản Phẩm Đã Chọn"></i>
<i class="fa-solid fa-pen-to-square fa-xl mt-2" alt="Chỉnh Sửa"></i>
</td>
<!-- Ô trống -->
</tr>
<!-- Thêm dòng sản phẩm khác tương tự -->
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
</div>
</td> <!-- Ô trống -->
<td>1</td>
<td>2023-09-25</td>
<td>600 Nguyen Van Cu extension, An Binh, Ninh Kieu, Can Tho 900000</td>
<td>0917893215</td>
<td>Adidas AlphaBounce - White - size42</td>
<td>300000</td>
<td>
<div class="custom" style="width:200px;">
<select>
<option value="0">Select Status:</option>
<option value="1">Wait</option>
<option value="2">Complete</option>
</select>
</div>
</td>
<td class="d-flex">
<i class="fa-solid fa-trash fa-xl mr-2 mt-2" id="xoaSapXep"
alt="Xóa Sản Phẩm Đã Chọn"></i>
<i class="fa-solid fa-pen-to-square fa-xl mt-2" alt="Chỉnh Sửa"></i>
</td>
<!-- Ô trống -->
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
</div>
</td> <!-- Ô trống -->
<td>1</td>
<td>2023-09-25</td>
<td>600 Nguyen Van Cu extension, An Binh, Ninh Kieu, Can Tho 900000</td>
<td>0917893215</td>
<td>Adidas AlphaBounce - White - size42</td>
<td>300000</td>
<td>
<div class="custom" style="width:200px;">
<select>
<option value="0">Select Status:</option>
<option value="1">Wait</option>
<option value="2">Complete</option>
</select>
</div>
</td>
<td class="d-flex">
<i class="fa-solid fa-trash fa-xl mr-2 mt-2" id="xoaSapXep"
alt="Xóa Sản Phẩm Đã Chọn"></i>
<i class="fa-solid fa-pen-to-square fa-xl mt-2" alt="Chỉnh Sửa"></i>
</td>
<!-- Ô trống -->
</tr>
<!-- Thêm dòng sản phẩm khác tương tự -->
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
</div>
</td> <!-- Ô trống -->
<td>1</td>
<td>2023-09-25</td>
<td>600 Nguyen Van Cu extension, An Binh, Ninh Kieu, Can Tho 900000</td>
<td>0917893215</td>
<td>Adidas AlphaBounce - White - size42</td>
<td>300000</td>
<td>
<div class="custom" style="width:200px;">
<select>
<option value="0">Select Status:</option>
<option value="1">Wait</option>
<option value="2">Complete</option>
</select>
</div>
</td>
<td class="d-flex">
<i class="fa-solid fa-trash fa-xl mr-2 mt-2" id="xoaSapXep"
alt="Xóa Sản Phẩm Đã Chọn"></i>
<i class="fa-solid fa-pen-to-square fa-xl mt-2" alt="Chỉnh Sửa"></i>
</td>
<!-- Ô trống -->
</tr>
</tbody>
</table>
<div class="pagination">
<a href="#" id="prev-page">Trang trước</a>
<a href="#" class="page-link" data-page="1">1</a>
<a href="#" class="page-link" data-page="2">2</a>
<a href="#" class="page-link" data-page="3">3</a>
<a href="#" id="next-page">Trang sau</a>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var quantitySelect = document.getElementById("quantity");
var productTable = document.getElementById("product-table");
quantitySelect.addEventListener("change", function () {
var selectedQuantity = parseInt(quantitySelect.value);
var tableRows = productTable.getElementsByTagName("tr");
// Ẩn tất cả các hàng
for (var i = 0; i < tableRows.length; i++) {
tableRows[i].style.display = "none";
}
// Hiển thị số lượng hàng tương ứng
for (var i = 1; i <= selectedQuantity; i++) {
tableRows[i].style.display = "";
}
});
});
//==============================================================================
document.getElementById("xoaSapXep").addEventListener("click", function () {
var checkboxes = document.querySelectorAll("input[type=checkbox]:checked");
var idsToDelete = [];
checkboxes.forEach(function (checkbox) {
var row = checkbox.closest("tr");
var id = row.querySelector("td:first-child").textContent;
idsToDelete.push(id);
});
if (idsToDelete.length > 0) {
// Hiển thị hộp thoại xác nhận
var isConfirmed = confirm("Bạn có chắc chắn muốn xóa các sản phẩm đã chọn?");
if (isConfirmed) {
checkboxes.forEach(function (checkbox) {
var row = checkbox.closest("tr");
row.remove();
});
// Ở đây, bạn có thể thực hiện việc xóa các sản phẩm với ID trong mảng idsToDelete.
// Ví dụ: gửi danh sách ID này đến máy chủ để xóa dữ liệu.
// Nếu bạn đang sử dụng một ngôn ngữ lập trình cụ thể, bạn có thể sử dụng AJAX để gửi dữ liệu này.
console.log("Đã xóa sản phẩm với ID: " + idsToDelete.join(", "));
}
} else {
alert("Vui lòng chọn ít nhất một sản phẩm để xóa.");
}
});
//================================================================
//Chức Năng tìm kiếm
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("tableSearch");
filter = input.value.toUpperCase();
table = document.getElementById("table-body");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (var j = 0; j < td.length; j++) {
if (td[j]) {
txtValue = td[j].textContent || td[j].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break;
} else {
tr[i].style.display = "none";
}
}
}
}
}
document.getElementById("search-button").addEventListener("click", myFunction);
</script>
</body>
</html>