javascript - bootpag-不工作基本示例

我正在尝试使用插件进行动态分页。

该插件是-

Bootpag - Dynamic Pagination

在Home page of the plugin中，我找到了一个示例，然后尝试使用该示例作为示例，而我所做的就是这样的:

<html>
<head>
    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
    <div id="content">Dynamic Content goes here</div>
    <div id="page-selection">Pagination goes here</div>
    <script>
        // init bootpag
        $('#page-selection').bootpag({
            total: 10
        }).on("page", function(event, /* page number here */ num){
             $("#content").html(num); // Changing div content to dynamic content
        });
    </script>
</body>
</html>

但这是行不通的。

谁能帮忙吗？

在此先感谢您的帮助。

最佳答案

我已经通过这种方式解决了-

$('#show_paginator').bootpag({
      total: 23,
      page: 3,
      maxVisible: 10
}).on('page', function(event, num)
{
     $("#dynamic_content").html("Page " + num); // or some ajax content loading...
});

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>

更多定制版本

$('#show_paginator').bootpag({
       total: 53,
       page: 2,
       maxVisible: 5,
       leaps: true,
       firstLastUse: true,
       first: '←',
       last: '→',
       wrapClass: 'pagination',
       activeClass: 'active',
       disabledClass: 'disabled',
       nextClass: 'next',
       prevClass: 'prev',
       lastClass: 'last',
       firstClass: 'first'
}).on('page', function(event, num)
{
     $("#dynamic_content").html("Page " + num); // or some ajax content loading...
});

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>

此选项可以进行更多自定义-

警告

在这里，我使用CDN(http://botmonster.com/jquery-bootpag/jquery.bootpag.js)显示内容。但是不建议这样做。

几乎不建议下载 this file 并将其放在本地。

因为没有用于bootpeg的官方CDN。

更

如果要在运行时更新分页器，请按以下方式调用分页器-

$('#show_paginator').bootpag({total: 55});

甚至可以找到from here。

我想你有完整的答案。