我一直在努力得到这个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>
页面按钮显示，但内容消失了。我做错了什么？
最佳答案
我遇到了完全相同的问题。查看文档后，该工具似乎只是用于呈现分页工具，我们需要自己处理如何绑定(bind)数据。
首先，您不需要选择器 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,
itemsOnPage: 2,
cssStyle: 'compact-theme',
onPageClick: function(pageNumber){test(pageNumber)}
});
});
</script>
</body>
</html>
关于javascript - 如何让这个 jquery 分页插件正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14995112/