如何在 bootstrap 中使用分页

Question

我正在使用下面的分页代码，这是我从 link 中获得的。 http://botmonster.com/jquery-bootpag/#.V5qvJ-0sjVM 但它对我不起作用。

<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("Insert content"); // some ajax content loading...
        });
    </script>
</body>
</html>

我是 jquery 的新人。请检查一次，让我知道我正在做的错误。

谢谢。

Answer 1

问题是您不能直接从 github link jquery-bootpag JS 文件。要么将其上传到您的本地环境，要么将 link 更改为类似以下内容：

//rawgit.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js，这样您的导入看起来像这样：

<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="//rawgit.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

如何在 bootstrap 中使用分页

how to use pagination in bootstrap

jquery

jquery-pagination

twitter-bootstrap

twitter-bootstrap-3