bootstrap-paginator使用简单案例

最新推荐文章于 2026-05-19 10:19:03 发布

原创最新推荐文章于 2026-05-19 10:19:03 发布 · 1.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

工作总结

本文介绍如何利用Bootstrap分页插件实现网页上的分页功能。通过简单的HTML和JavaScript代码，可以快速设置分页样式，并自定义显示的页码数量等参数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div id="myPaginator" style="text-align: right"> <ul id="page"></ul> </div>
  <script src="./jquery/jquery-1.12.4.min.js"></script>
  <script src="./bootstrap/js/bootstrap.min.js"></script>
  <script src="./bootstrap-paginator/bootstrap-paginator.min.js"></script>
  <script>
        $('#page').bootstrapPaginator({
        currentPage: 1,//当前的请求页面。
        totalPages: 20,//一共多少页。
        size:"normal",//应该是页眉的大小。
        bootstrapMajorVersion: 3,//bootstrap的版本要求。
        alignment:"right",
        numberOfPages:5,//一页列出多少数据。
        itemTexts: function (type, page, current) {
             switch (type) {
             case "first": return "首页";
             case "prev": return "上一页";
             case "next": return "下一页";
             case "last": return "末页";
             case "page": return page;
             }
          }
     });
     </script>
</body>
</html>