bootstrap js、bootstrap jsp表格 翻页
开头:解决方案简述
在Web开发中,使用Bootstrap框架可以快速构建响应式的用户界面。当涉及到表格数据的展示时,分页功能是提高用户体验的重要手段之一。通过结合Bootstrap JS和JSP(Java Server Pages),我们可以轻松实现一个美观且功能强大的分页表格。介绍几种实现方法,并提供详细的代码示例。
一、使用Bootstrap自带分页组件
Bootstrap提供了现成的分页组件,可以通过简单的HTML标签来创建分页按钮。我们只需要为表格添加分页逻辑即可。
1. HTML结构
html</p>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody id="table-body">
<!-- 数据行将在这里动态插入 -->
</tbody>
</table>
<ul class="pagination" id="pagination">
<!-- 分页按钮将在这里动态生成 -->
</ul>
<p>
2. JavaScript代码
javascript
// 假设这是从服务器获取的数据
var data = [
{id: 1, name: '张三', email: 'zhangsan@example.com'},
{id: 2, name: '李四', email: 'lisi@example.com'},
// ... 更多数据 ...
];</p>
<p>// 每页显示的条目数
const itemsPerPage = 5;</p>
<p>// 当前页码
let currentPage = 1;</p>
<p>function renderTable(page) {
const start = (page - 1) * itemsPerPage;
const end = start + itemsPerPage;
const pageData = data.slice(start, end);</p>
<pre><code>let rows = '';
pageData.forEach(item => {
rows += `<tr><td>${item.id}</td><td>${item.name}</td><td>${item.email}</td></tr>`;
});
document.getElementById('table-body').innerHTML = rows;
}
function renderPagination(totalPages) {
let paginationHtml = '';
for (let i = 1; i <= totalPages; i++) {
paginationHtml += <li class="page-item ${i === currentPage ? 'active' : ''}">
;
<a class="page-link" href="#" rel="external nofollow" onclick="changePage(${i})">${i}</a>
</li>
}
document.getElementById('pagination').innerHTML = paginationHtml;
}
function changePage(page) {
currentPage = page;
renderTable(currentPage);
renderPagination(Math.ceil(data.length / itemsPerPage));
}
// 初始化表格和分页
renderTable(currentPage);
renderPagination(Math.ceil(data.length / itemsPerPage));
二、使用JSP后端分页
如果数据量较大,我们可以在服务器端进行分页处理,然后将每一页的数据发送给前端显示。
1. JSP页面代码
jsp
<%@ page import="java.util.List" %>
<%@ page import="com.example.model.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
</p>
<title>分页表格</title>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<% List users = (List) request.getAttribute("users"); %>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="page-item ">
<a class="page-link" href="?page=">Previous</a>
</li>
<%
int totalPages = (int) request.getAttribute("totalPages");
for (int i = 1; i
<li class="page-item ">
<a class="page-link" href="?page="></a>
</li>
<li class="page-item ">
<a class="page-link" href="?page=">Next</a>
</li>
</ul>
</div>
<p>
2. Java Servlet代码
java
import com.example.model.User;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;</p>
<p>@WebServlet("/users")
public class UserServlet extends HttpServlet {
private static final int ITEMS<em>PER</em>PAGE = 5;</p>
<pre><code>protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 获取请求参数中的页码,默认页
String currentPageStr = request.getParameter("page");
int currentPage = (currentPageStr == null || currentPageStr.isEmpty()) ? 1 : Integer.parseInt(currentPageStr);
// 假设这里是从数据库查询得到所有用户数据
List<User> allUsers = userService.getAllUsers();
// 计算总页数
int totalPages = (int) Math.ceil((double) allUsers.size() / ITEMS_PER_PAGE);
// 根据当前页码计算起始索引和结束索引
int startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
int endIndex = Math.min(startIndex + ITEMS_PER_PAGE, allUsers.size());
// 获取当前页的数据
List<User> users = allUsers.subList(startIndex, endIndex);
// 将数据放入请求属性中
request.setAttribute("users", users);
request.setAttribute("currentPage", String.valueOf(currentPage));
request.setAttribute("totalPages", String.valueOf(totalPages));
// 转发到JSP页面
request.getRequestDispatcher("/WEB-INF/views/user-list.jsp").forward(request, response);
}
}
以上两种方法都可以实现Bootstrap表格的分页功能,具体选择哪种方式取决于实际需求。如果数据量较小且不需要频繁更新,前端分页可能更为简单;而对于大量数据或需要实时更新的情况,则建议采用后端分页的方式。