<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Table with Pagination</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-4">
<table id="tableWithPagination" class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<!-- 数据通过 JavaScript 动态加载 -->
</tbody>
</table>
<div id="pagination"></div>
</div>
<script>
$(document).ready(function() {
var currentPage = 1;
var itemsPerPage = 10;
function fetchData(page) {
// 这里应该是一个向服务器发送请求获取数据的函数
// 为了示例，我们使用一个静态的数据
var data = {
"items": [
// ... 数据项
],
"total": 100 // 总数据量
};
return data;
}
function renderTable(data) {
var html = '';
var items = data.items;
for (var i = 0; i < items.length; i++) {
html += '<tr>' +
'<td>' + (i + 1) + '</td>' +
'<td>' + items[i].name + '</td>' +
'<td>' + items[i].email + '</td>' +
'</tr>';
}
$('#tableWithPagination tbody').html(html);
}
function renderPagination(data) {
$('#pagination').bootpag({
total: Math.ceil(data.total / itemsPerPage),
page: currentPage,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: '首页',
last: '尾页',
评论已关闭