本示例展示了如何使用Tailwind CSS框架创建一个简单的分页功能。通过这个示例，你可以学习如何在HTML中使用Tailwind CSS类来设计页面布局，并通过JavaScript实现分页逻辑。
关于Tailwind的部署使用看这篇：Tailwind CSS入门体验
功能说明：
- 1.页面布局 ：使用Tailwind CSS类来设计页面的布局，包括标题、表格和分页控件。
- 2.分页控件 ：通过JavaScript动态生成页码，并实现翻页功能。
- 3.每页显示数量 ：用户可以通过下拉框选择每页显示的题目数量，支持5、10、20和全部显示。
- 4.翻页功能 ：提供“第1页”、“上一页”、“下一页”和“最后一页”按钮，方便用户快速翻页。
1.HTML结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>分页示例</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto py-5">
<div class="bg-white shadow border border-orange-700 rounded-sm mt-3">
<div class="bg-white text-black p-4 flex justify-center items-center">
<h2 class="mb-0 text-4xl">题目查询</h2>
</div>
<div class="p-4">
<table class="min-w-full bg-white shadow-md border border-gray-400 rounded border-collapse text-center">
<thead class="bg-blue-100">
<tr>
<th class="border border-gray-300 px-4 py-2">ID</th>
<th class="border border-gray-300 px-4 py-2">问题</th>
</tr>
</thead>
<tbody id="question-table">
<tr class="hover:bg-gray-100">
<td class="border border-gray-300 px-4 py-2">1</td>
<td class="border border-gray-300 px-4 py-2 text-left">问题一</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="border border-gray-300 px-4 py-2">2</td>
<td class="border border-gray-300 px-4 py-2 text-left">问题二</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="border border-gray-300 px-4 py-2">3</td>
<td class="border border-gray-300 px-4 py-2 text-left">问题三</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="border border-gray-300 px-4 py-2">4</td>
<td class="border border-gray-300 px-4 py-2 text-left">问题四</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="border border-gray-300 px-4 py-2">5</td>
<td class="border border-gray-300 px-4 py-2 text-left">问题五</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="border border-gray-300 px-4 py-2">6</td>
<td class="border border-gray-300 px-4 py-2 text-left">问题六</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="border border-gray-300 px-4 py-2">7</td>
<td class="border border-gray-300 px-4 py-2 text-left">问题七</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="border border-gray-300 px-4 py-2">8</td>
<td class="border border-gray-300 px-4 py-2 text-left">问题八</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="border border-gray-300 px-4 py-2">9</td>
<td class="border border-gray-300 px-4 py-2 text-left">问题九</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="border border-gray-300 px-4 py-2">10</td>
<td class="border border-gray-300 px-4 py-2 text-left">问题十</td>
</tr>
</tbody>
</table>
</div>
<div class="bg-gray-100 text-center py-4">
<div class="inline-flex items-center space-x-2">
<label for="per_page" class="text-lg">每页显示:</label>
<select id="per_page" class="border border-gray-300 rounded-md px-2 py-1 text-lg">
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="all">全部</option>
</select>
</div>
<div class="flex justify-center space-x-4 mt-6 mb-6" id="pagination-controls">
<button onclick="goToFirstPage()" class="btn bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-400">第1页</button>
<button onclick="goToPreviousPage()" class="btn bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-400">上一页</button>
<select id="page_select" class="border border-gray-300 rounded-md px-2 py-1 text-lg" onchange="goToPage(this.value)">
</select>
<button onclick="goToNextPage()" class="btn bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-400">下一页</button>
<button onclick="goToLastPage()" class="btn bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-400">最后一页</button>
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
|
2.JavaScript逻辑
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
let currentPage = 1;
let perPage = 5;
let totalItems = 10;
let totalPages = Math.ceil(totalItems / perPage);
window.onload = function() {
updatePageSelect();
paginate();
};
document.getElementById('per_page').addEventListener('change', function() {
perPage = this.value === 'all' ? totalItems : parseInt(this.value);
totalPages = Math.ceil(totalItems / perPage);
currentPage = 1;
updatePageSelect();
paginate();
});
function updatePageSelect() {
const pageSelect = document.getElementById('page_select');
pageSelect.innerHTML = '';
for (let i = 1; i <= totalPages; i++) {
const option = document.createElement('option');
option.value = i;
option.textContent = `第${i}页`;
if (i === currentPage) {
option.selected = true;
}
pageSelect.appendChild(option);
}
}
function paginate() {
const tableRows = document.querySelectorAll('#question-table tr');
tableRows.forEach((row, index) => {
if (index >= (currentPage - 1) * perPage && index < currentPage * perPage) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
}
function goToPage(page) {
currentPage = parseInt(page);
paginate();
}
function goToFirstPage() {
currentPage = 1;
paginate();
updatePageSelect();
}
function goToPreviousPage() {
if (currentPage > 1) {
currentPage--;
paginate();
updatePageSelect();
}
}
function goToNextPage() {
if (currentPage < totalPages) {
currentPage++;
paginate();
updatePageSelect();
}
}
function goToLastPage() {
currentPage = totalPages;
paginate();
updatePageSelect();
}
|
演示：
