《bootstrap自带的分页_bootstrap分页带每页数量》
一、解决方案简述
Bootstrap自带的分页功能可以很好地满足页面分页展示的需求。当需要实现分页且带有每页显示数量选择的功能时，我们可以通过结合Bootstrap的分页组件和一些自定义的代码逻辑来达成目的。这不仅能让页面布局美观大方，还能让用户根据自身需求灵活控制每页显示的数据量。
二、思路一：使用原生Bootstrap分页与JavaScript配合
引入Bootstrap的css和js文件。
html
<!-- Bootstrap CSS -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --></p>
<p><!-- Bootstrap JS --></p>
<p>然后创建分页结构，包括一个下拉菜单用于选择每页显示数量。
html</p>
<div class="container">
<div class="row">
<div class="col - 12 mb - 3">
<label for="pageSizeSelect">每页显示数量：</label>
5
10
15
</div>
<nav>
<ul id="paginationUl" class="pagination justify - content - center">
<!-- 分页项将通过JavaScript动态生成 -->
</ul>
</nav>
</div>
</div>
<p>接下来编写JavaScript代码来处理分页逻辑。这里假设我们有一组数据dataList，并且总共有100条数据。
javascript
var dataList = new Array(100); // 示例数据
var currentPage = 1;
var pageSize = 5;</p>
<p>function renderPagination(totalPages) {
var paginationHtml = '';
if (currentPage > 1) {
paginationHtml += '<li class="page - item"><a class="page - link" href="#">Previous</a></li>';
}
for (var i = 1; i <= totalPages; i++) {
if (i === currentPage) {
paginationHtml += '<li class="page - item active"><a class="page - link" href="#">' + i + '</a></li>';
} else {
paginationHtml += '<li class="page - item"><a class="page - link" href="#">' + i + '</a></li>';
}
}
if (currentPage < totalPages) {
paginationHtml += '<li class="page - item"><a class="page - link" href="#">Next</a></li>';
}
$('#paginationUl').html(paginationHtml);
}</p>
<p>function goToPage(page) {
currentPage = page;
var startIndex = (currentPage - 1) * pageSize;
var endIndex = currentPage * pageSize;
var paginatedData = dataList.slice(startIndex, endIndex);
console.log(paginatedData); // 这里可以根据实际需求展示分页后的数据，例如填充到表格中等
renderPagination(Math.ceil(dataList.length / pageSize));
}</p>
<p>$('#pageSizeSelect').on('change', function () {
pageSize = parseInt($(this).val());
currentPage = 1;
goToPage(currentPage);
});</p>
<p>renderPagination(Math.ceil(dataList.length / pageSize));
三、思路二：利用Bootstrap Pagination插件（如果有）
有些场景下可能会有专门针对Bootstrap的分页插件，这些插件可能提供了更便捷的方式来设置分页以及每页数量。如果项目允许使用第三方插件，可以在项目中引入该插件。按照插件文档中的说明，通常只需要简单配置分页的总数、当前页码、每页数量等参数即可轻松实现分页效果，并且插件内部已经处理好了分页相关的事件绑定等操作，开发者只需关注数据的展示部分。不过需要注意的是，在使用插件之前要确保插件的安全性和兼容性，并且对插件的依赖可能导致项目灵活性降低。
