我有一个来自数组和自定义分页的引导表。表中每3行显示一次分页，我的下一个和上一个按钮效果很好。现在我想在上一个和下一个按钮之间插入索引-> | prev | 1 | 2 | 3 | next |
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnqq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmvgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script>
$(document).ready(function() {
var table = $("#bodytable");
var data = [
{
id: 1,name: "12",address: "13",city: "14"
},{
id: 2,name: "15",address: "16",city: "17"
},{
id: 3,name: "18",address: "19",city: "20"
},{
id: 4,name: "21",address: "22",city: "23"
},{
id: 5,name: "24",address: "25",city: "26"
},{
id: 6,name: "27",address: "28",city: "29"
},{
id: 7,name: "30",address: "31",city: "32"
},{
id: 8,name: "33",address: "34",city: "35"
},{
id: 9,name: "36",address: "37",city: "38"
},{
id: 10,name: "39",address: "40",city: "41"
} ];
var max_size = data.length;
var start = 0;
var elements_per_page = 3;
var limit = elements_per_page;
goPage(start,limit);
function goPage(start,limit) {
for (var i = start; i < limit; i++) {
var $rows = $(
"<tr><td>" +
data[i]["id"] +
"</td><td>" +
data[i]["name"] +
"</td><td>" +
data[i]["address"] +
"</td><td>" +
data[i]["city"] +
"</td></tr>"
);
table.append($rows);
}
}
$("#nextvalues").click(function() {
var next = limit;
if (max_size >= next) {
limit = limit + elements_per_page;
table.empty();
goPage(next,limit);
}
});
$("#preValues").click(function() {
var pre = limit - 2 * elements_per_page;
if (pre >= 0) {
limit = limit - elements_per_page;
table.empty();
goPage(pre,limit);
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="row mt-3">
<div class="col-12">
<table class="table" id="myTable">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Address</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody id="bodytable">
</tbody>
</table>
</div>
</div>
<div class="row justify-content-center">
<nav>
<ul class="pagination">
<li class="page-item">
<button class="page-link" id="preValues">Prev</button>
</li>
<li class="page-item">
<button class="page-link" id="nextvalues">Next</button>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>