bootpag - 不工作基本示例
Abr*_*hin 4 html javascript jquery cdn twitter-bootstrap
我正在尝试使用动态分页插件。
该插件是-
在插件的主页中，我找到了一个示例，我尝试使用它作为示例，我所做的就是这样的-
<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>但它不起作用。
有人可以帮忙吗？
预先感谢您的帮助。
我已经用这种方法解决了——
\n\n\r\n
\r\n\n\n\r\n
\r\n$(\'#show_paginator\').bootpag({\r\n total: 23,\r\n page: 3,\r\n maxVisible: 10\r\n}).on(\'page\', function(event, num)\r\n{\r\n $("#dynamic_content").html("Page " + num); // or some ajax content loading...\r\n});<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>\r\n<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>\r\n<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>\r\n<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">\r\n\r\n<div id="dynamic_content">Pagination goes here</div>\r\n<div id="show_paginator"></div>\n\n
更多定制版本-
\n\n\r\n
\r\n\n\n\r\n
\r\n$(\'#show_paginator\').bootpag({\r\n total: 53,\r\n page: 2,\r\n maxVisible: 5,\r\n leaps: true,\r\n firstLastUse: true,\r\n first: \'\xe2\x86\x90\',\r\n last: \'\xe2\x86\x92\',\r\n wrapClass: \'pagination\',\r\n activeClass: \'active\',\r\n disabledClass: \'disabled\',\r\n nextClass: \'next\',\r\n prevClass: \'prev\',\r\n lastClass: \'last\',\r\n firstClass: \'first\'\r\n}).on(\'page\', function(event, num)\r\n{\r\n $("#dynamic_content").html("Page " + num); // or some ajax content loading...\r\n});<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>\r\n<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>\r\n<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>\r\n<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">\r\n\r\n<div id="dynamic_content">Pagination goes here</div>\r\n<div id="show_paginator"></div>\n\n
通过此选项可以完成更多自定义-
\n\n
\n\n
警告
\n\n在这里，我使用CDN ( http://botmonster.com/jquery-bootpag/jquery.bootpag.js ) 来显示内容。但不建议这样做。
\n\n几乎不建议下载此文件并将其放在本地。
\n\n因为bootpeg没有官方的CDN。
\n\n\n\n
更
\n\n如果想在运行时更新分页器，请像这样调用分页器 -
\n\n$(\'#show_paginator\').bootpag({total: 55});\n\n\n
甚至更多，可以从这里找到。
\n\n\n\n
我想你已经有了完整的答案。
\n