jquery 上下分页

jQuery是一种流行的JavaScript库，常用于创建用户友好的动态网页。其中之一的功能是Paginate（分页）。

Paginate是一种将长列表分割成多个页面的方法。这有助于减轻服务器负担，加快页面加载速度，并使用户更容易浏览长列表。jQuery简化了Paginate的实现，使其易于使用和自定义。

在下面的代码示例中，我们将使用jQuery插件“jQuery.twbsPagination”来演示如何实现基于上下文的分页：

  <!-- 引入jquery和twbsPagination库 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"></script>

  <div class="my-pagination">
    <ul class="pagination"></ul>
  </div>

  <script>
    $(document).ready(function () {
      // 定义分页的选项和回调函数
      var options = {
        totalPages: 10,
        visiblePages: 5,
        onPageClick: function (event, page) {
          // 中间逻辑，在此处更新页面内容
          console.log(page);
        }
      };

      // 为分页设置选项并初始化
      $('.pagination').twbsPagination(options);
    });
  </script>

在上面的示例中，“totalPages”表示要分页的总页数，“visiblePages”表示分页控件上显示的分页按钮数。当用户单击一个分页按钮时，回调函数“onPageClick”将被触发，并为开发人员提供要显示的页面数字。

在回调函数中，您可以将从服务器接收到的数据加载到页面中，或者显示预先加载的所有项目，并根据页码仅显示需要的子集项目。这个插件简单，好用。