我一直试图让这个
jQuery pagination plugin工作.出于某种原因,它没有,我真的不确定为什么.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/simplePagination.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.simplePagination.js"></script>
</head>
<body>
<div id="selector">
<ul class="selector">
<li>
<p>One</p>
</li>
<li>
<p>Two</p>
</li>
<li>
<p>Three</p>
</li>
<li>
<p>Four</p>
</li>
<li>
<p>Five</p>
</li>
<li>
<p>Six</p>
</li>
<li>
<p>Seven</p>
</li>
<li>
<p>Eight</p>
</li>
</ul>
</div>
<script language="javascript">
$(function() {
$(selector).pagination({
items: 8,itemsOnPage: 1,cssstyle: 'light-theme'
});
});
</script>
</body>
</html>
页面的按钮显示,但内容消失.我究竟做错了什么？
这是一个演示：http://jsbin.com/obacig/1/edit
解决方法
我有完全相同的问题.在查看文档后,看起来该工具实际上只是用于渲染分页工具,我们需要自己处理数据绑定的方式.
首先,你在选择器div中不需要任何东西 – 这就是分页控件出现的地方：
所以请将其留空并让您的内容在段落或其他内容中位于其上方：
<p class="selection" id="page-1">one</p> <p class="selection" id="page-2">Two</p> <p class="selection" id="page-3">Three</p> <p class="selection" id="page-4">Four</p> <p class="selection" id="page-5">Five</p> <p class="selection" id="page-6">Six</p> <p class="selection" id="page-7">Seven</p> <p class="selection" id="page-8">Eight</p> <div id="selector"> </div>
如果您正在使用动态数据,则必须动态生成id
然后在身体结束标记之前,你需要这个脚本：
<script language="javascript">
$(function() {
$('#selector').pagination({
items: 10,itemsOnPage: 2,cssstyle: 'compact-theme',onPageClick: function(pageNumber){test(pageNumber)}
});
});
</script>
注意我已经添加了onPageClick函数(需要重命名),它将页码传递给我的函数.
我在标题部分有这个：
<style type="text/css">
.selection {
display: none;
}
</style>
<script>
function test(pageNumber)
{
var page="#page-"+pageNumber;
$('.selection').hide()
$(page).show()
}
</script>
</head>
css最初是按类隐藏它们,然后该函数关闭当前打开的任何一个并按id打开你想要的那个.
现在似乎对我来说还行,但它真是令人沮丧:)
这是整个脚本：
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="pager.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.selection {
display: none;
}
</style>
<script>
function test(pageNumber)
{
var page="#page-"+pageNumber;
$('.selection').hide()
$(page).show()
}
</script>
</head>
<body>
<p class="selection" id="page-1">one</p>
<p class="selection" id="page-2">Two</p>
<p class="selection" id="page-3">Three</p>
<p class="selection" id="page-4">Four</p>
<p class="selection" id="page-5">Five</p>
<p class="selection" id="page-6">Six</p>
<p class="selection" id="page-7">Seven</p>
<p class="selection" id="page-8">Eight</p>
<div id="selector">
</div>
<script language="javascript">
$(function() {
$('#selector').pagination({
items: 10,onPageClick: function(pageNumber){test(pageNumber)}
});
});
</script>
</body>
</html>