js分页条插件下载

<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入分页插件 -->
<link rel="stylesheet" href="path/to/jquery.twbsPagination.css">
<script src="path/to/jquery.twbsPagination.min.js"></script>

<!-- 分页容器 -->
<div id="pagination"></div>

<script>
$(document).ready(function(){
    var items = ['Item 1', 'Item 2', 'Item 3', /* ...更多项... */];
    var perPage = 10;
    $('#pagination').twbsPagination({
        totalPages: Math.ceil(items.length / perPage),
        visiblePages: 5,
        onPageClick: function (event, page) {
            // 处理页面点击事件，显示对应页的数据
            var start = (page - 1) * perPage;
            var end = start + perPage;
            var paginatedItems = items.slice(start, end);
            // 更新页面内容
            // ...
        }
    });
});
</script>

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

function paginate(data, perPage, currentPage) {
    var start = (currentPage - 1) * perPage;
    var end = start + perPage;
    return data.slice(start, end);
}

var items = [/* ...数据项... */];
var perPage = 10;
var currentPage = 1;

// 显示当前页的数据
var paginatedItems = paginate(items, perPage, currentPage);
// 更新页面内容
// ...

// 分页导航事件处理
function setupPagination() {
    // ...
}