Joh*_*ith 7 html javascript jquery pagination
我一直试图让这个jQuery分页插件工作.出于某种原因,它没有,我真的不确定为什么.
<!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
小智 13
我有完全相同的问题.在查看文档之后,看起来该工具实际上只是用于渲染分页工具,我们需要处理我们如何自己绑定数据.
首先,你不需要选择器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>
D.Mac有一个非常好的答案,但如果你实现,它不会自动显示第一页,只有当点击另一个页面然后你回到一个页面.
所以我添加了这个小函数,以确保分页在第一页上启动
function pageOne() {
var page_1 = "#page-1";
$('.selection').hide()
$(page_1).show()
}
<script language="javascript">
$(function() {
$('#selector').pagination({
items: 10,
itemsOnPage: 2,
cssStyle: 'compact-theme',
currentPage: 1,
onPageClick: function(pageNumber){test(pageNumber)},
onInit: function(){pageOne()},
});
});
</script>