1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <!-- Import Pagination.js style sheet from CDN -->
    5.     <link href="https://cdn.bootcss.com/paginationjs/2.1.4/pagination.css" rel="stylesheet">
    6.   </head>
    7.   <body>
    8.     <!-- Data and paginator display section -->
    9.     <div id="demo">
    10.         <div class="data-container"></div>
    11.     </div>
    13.     <!-- Import JQuery and Pagination.js from CDN -->
    14.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    15.     <script src="https://cdn.bootcss.com/paginationjs/2.1.4/pagination.min.js"></script>
    17.     <!-- Script begin -->
    18.     <script>
    19.       $(window).ready(function() {
    20.         // 源数据生成函数
    21.         var generateData = function(number) {
    22.           var result = [];
    23.           for (var i = 1; i < number + 1; i++) {
    24.             result.push(i);
    25.           }
    26.           return result;
    27.         };
    29.         // dataContainer 数据模板函数
    30.         var template = function(data) {
    31.           var html = '<ul>';
    32.           $.each(data, function(index, item) {
    33.               html += '<li>'+ item +'</li>';
    34.           });
    35.           html += '</ul>';
    36.           return html;
    37.         };
    39.         // pagination 主函数
    40.         $('#demo').pagination({
    41.             dataSource: generateData(120),
    42.             callback: function(data, pagination) {
    43.               var dataContainer = $(".data-container");
    44.               var html = template(data);
    45.               dataContainer.html(html);
    46.             }
    47.         })
    48.       });
    49.     </script>
    50.     <!-- Script end   -->
    52.   </body>
    53. </html>

    将以上代码复制、粘贴到新建的空白 sample.html 中，保存后即可双击 sample.html 打开浏览器观看 Pagination.js 的实际应用效果。无须下载，不需要Web服务器，本地文件即可运行。

    PS： Pagination.js官网链接