本示例展示了如何使用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/[email protected]/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(); }
|
演示: