引导-不起作用的基本示例
引导-不起作用的基本示例
提问于 2016-03-26 11:33:29
我正在尝试使用一个插件进行动态分页。
插件是-
Bootpag -动态分页
在插件主页中，我找到了一个例子，我试着用它作为例子，我所做的是这样的-
<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>
但这是行不通的。
有人能帮忙吗？
提前感谢你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-04-30 05:55:57
我用这种方式解决了-
$('#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>
这个options可以完成更多的定制-
警告
这里我使用一个CDN (http://botmonster.com/jquery-bootpag/jquery.bootpag.js)来显示内容。但这是不推荐的。
很难推荐下载这个文件并将其放在本地。
因为没有官方的CDN来引导。
甚至更多
如果要在运行时更新分页器，请按以下方式调用分页器-
$('#show_paginator').bootpag({total: 55});更多的，可以找到从这里开始。
我想你有完整的答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36234777
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号