Javascript 如何让这个 jquery 分页插件正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14995112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get this jquery pagination plugin to work properly
提问by John Smith
I have been trying to get this jQuery pagination pluginto work. For some reason, it doesn't and I'm really not sure why.
我一直在尝试让这个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>
The buttons for the pages display, but the content is gone. What am I doing wrong?
页面的按钮显示，但内容不见了。我究竟做错了什么？
Here is a demo: http://jsbin.com/obacig/1/edit
这是一个演示：http: //jsbin.com/obacig/1/edit
回答by
I've had exactly the same problem. After looking at the documentation it appears the tool is literally just for rendering the pagination tool and we need to take care of how we bind the data ourselves.
我遇到了完全相同的问题。查看文档后，该工具实际上只是用于呈现分页工具，我们需要自己处理如何绑定数据。
first of all you don't need anything inside the selector div - that is where the pagination controls appear:
首先，在选择器 div 中不需要任何东西 - 这就是分页控件出现的地方：
so leave that empty and have your content sit above it in paragraphs or whatever:
因此，将其留空，并将您的内容放在段落或其他内容的上方：
<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>
If you are working with a dynamic data you'd have to generate the id's on the fly
如果您正在处理动态数据，则必须即时生成 ID
then beneath that just before the body closing tag you need this script:
然后在正文结束标记之前的下方，您需要此脚本：
<script language="javascript">
$(function() {
$('#selector').pagination({
items: 10,
itemsOnPage: 2,
cssStyle: 'compact-theme',
onPageClick: function(pageNumber){test(pageNumber)}
});
});
</script>
notice I've added the onPageClick function (needs renaming) which will pass the page number to my function.
注意我添加了 onPageClick 函数（需要重命名），它将页码传递给我的函数。
I've got this in my header section:
我在我的标题部分有这个：
<style type="text/css">
.selection {
display: none;
}
</style>
<script>
function test(pageNumber)
{
var page="#page-"+pageNumber;
$('.selection').hide()
$(page).show()
}
</script>
</head>
The css originally hides them all by class, then the function closes any that are currently open and opens the one you want by id.
css 最初按类将它们全部隐藏，然后该函数关闭当前打开的所有并按 id 打开您想要的。
seems to work okay now for me but it was so frustrating :)
现在对我来说似乎工作正常，但它太令人沮丧了 :)
here's the whole script:
这是整个脚本：
<!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>
回答by tallgirltaadaa
D.Mac had a really great answer, but if you implement, it does not show the first page automatically, only when another page is clicked and then you go back to one.
D.Mac 有一个非常好的答案，但如果你实施，它不会自动显示第一页，只有当另一个页面被点击然后你回到一个页面时。
so I added this small function to make sure the pagination initiates on the first page
所以我添加了这个小功能以确保分页在第一页上启动
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>
回答by Mike O'Connor
Three years have passed since this question was posted. You may find a better answer on this 2014 stackoverflow page. In particular, take a look at the answer by Bilal Akil, and my own contribution that is directly below his.
自从发布这个问题以来，已经过去了三年。您可能会在2014 年的 stackoverflow 页面上找到更好的答案。特别是看一下 Bilal Akil 的回答，以及我自己在他下面的贡献。
I too had been utterly befuddled by how to use simplepagination.js and Bill (Bilal) showed me the way. His web articleshould do the trick for you, but the simple version that I put up on that 2014 stackoverflow article is the one that I'm still using and it still works.
我也完全被如何使用 simplepagination.js 弄糊涂了，Bill (Bilal) 向我展示了方法。他的网络文章应该可以为您解决问题，但我在 2014 年的 stackoverflow 文章中提供的简单版本是我仍在使用的版本，并且仍然有效。
If you use that version, or possibly Bill's current revised version too, you should always affix #page-n to any link URL that you put in your own website to your own page, unless you have target="_blank" implemented--- even though leaving it off will still get users to the page (the necessity being to help the back navigation button work). This is explained in my answer in the 2014 article.
如果您使用该版本，或者也可能是 Bill 当前的修订版本，则应始终将 #page-n 附加到您在自己的网站中放置到您自己的页面的任何链接 URL 后，除非您已实现 target="_blank" ---即使关闭它仍然会让用户进入页面（必要的是帮助后退导航按钮工作）。我在 2014 年的文章中的回答中对此进行了解释。
On the humourous side, I found the page we're on now while looking just now for a solution to the back navigation button problem, that I just rencountered during a current site revision. I found the answer in my own 2014 answer! I had forgotten that detail.
在幽默方面，我找到了我们现在所在的页面，同时正在寻找返回导航按钮问题的解决方案，这是我在当前站点修订期间遇到的。我在自己 2014 年的回答中找到了答案！我已经忘记了那个细节。
回答by Aaron Lee
$(selector) should be $("#selector")
$(selector) 应该是 $("#selector")
for selecting IDs in jquery u need a hash tag
要在 jquery 中选择 ID，您需要一个哈希标签
回答by Staker
I built and shared my own jquery mobile pagination plugin for a project that needed a simple paginated list. Basically the plugin appends a "Show More" button to the end of the list and you can configure the "per page" items to be returned via an Ajax call. Of course you will need to hook the offset and limit on the server side, but overall I think it's pretty straight forward and useful. Give it a try http://listomatic.stakbit.com/
我为一个需要简单分页列表的项目构建并共享了我自己的 jquery 移动分页插件。基本上，该插件会在列表末尾附加一个“显示更多”按钮，您可以配置要通过 Ajax 调用返回的“每页”项目。当然，您需要在服务器端挂钩偏移和限制，但总的来说，我认为它非常简单且有用。试一试http://listomatic.stakbit.com/
