Tailwind框架分页示例
HDUZN

本示例展示了如何使用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; // 默认每页显示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();
}

演示:

  • 本文标题:Tailwind框架分页示例
  • 本文作者:HDUZN
  • 创建时间:2024-10-06 13:51:15
  • 本文链接:http://hduzn.cn/2024/10/06/Tailwind框架分页示例/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
 评论