92 lines
3.5 KiB
HTML
92 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sorting Test</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<h1>Sorting Functionality Test</h1>
|
|
|
|
<div class="alert alert-info">
|
|
<strong>Current URL:</strong> <span id="currentUrl"></span>
|
|
</div>
|
|
|
|
<table class="table table-striped">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th>
|
|
<a href="javascript:void(0)"
|
|
onclick="updateSort('id')"
|
|
class="text-white text-decoration-none"
|
|
data-sort-field="id">
|
|
ID
|
|
<i class="bi bi-arrow-up sort-icon" style="display: none;"></i>
|
|
</a>
|
|
</th>
|
|
<th>
|
|
<a href="javascript:void(0)"
|
|
onclick="updateSort('name')"
|
|
class="text-white text-decoration-none"
|
|
data-sort-field="name">
|
|
Name
|
|
<i class="bi bi-arrow-up sort-icon" style="display: none;"></i>
|
|
</a>
|
|
</th>
|
|
<th>
|
|
<a href="javascript:void(0)"
|
|
onclick="updateSort('created_at')"
|
|
class="text-white text-decoration-none"
|
|
data-sort-field="created_at">
|
|
Created At
|
|
<i class="bi bi-arrow-up sort-icon" style="display: none;"></i>
|
|
</a>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>Test Item 1</td>
|
|
<td>2024-01-01</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>Test Item 2</td>
|
|
<td>2024-01-02</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5>Test Instructions:</h5>
|
|
<ol>
|
|
<li>Click on any column header (ID, Name, or Created At)</li>
|
|
<li>The URL should update with ?sort=field_name</li>
|
|
<li>Click again to toggle to descending (?sort=-field_name)</li>
|
|
<li>Click a third time to toggle back to ascending</li>
|
|
<li>Add ?page=5 to the URL and click a header - page should reset to 1</li>
|
|
<li>Add ?search=test to the URL and click a header - search should be preserved</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="sorting.js"></script>
|
|
<script>
|
|
// Display current URL
|
|
function updateUrlDisplay() {
|
|
document.getElementById('currentUrl').textContent = window.location.href;
|
|
}
|
|
updateUrlDisplay();
|
|
|
|
// Update URL display on page load
|
|
window.addEventListener('load', updateUrlDisplay);
|
|
</script>
|
|
</body>
|
|
</html>
|