Question

我一直试图让这个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

Answer 1

我遇到了完全相同的问题。在查看文档后，看来该工具实际上只是用于渲染分页工具，我们需要自己处理数据绑定的方式。

首先，你不需要选择器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>

Answer 2

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>

Answer 3

自这个问题发布以来已经过去了三年。您可以在此2014 stackoverflow page找到更好的答案。特别要看看Bilal Akil的回答，以及我自己的贡献，直接在他的下方。

我也被如何使用simplepagination.js和比尔（比拉尔）给我的方式弄糊涂了。他的web article应该为你做的伎俩，但我在2014年stackoverflow文章中提出的简单版本是我仍在使用的版本，它仍然有效。

如果您使用的是该版本，或者也可能是Bill目前的修订版本，您应该始终将#page-n粘贴到您在自己网站上放置到自己网页的任何链接网址，除非您有目标= ＆＃34; _blank＆＃34;实现---即使将其关闭仍然会让用户访问该页面（必要的是帮助后退导航按钮工作）。我在2014年的文章中回答了这一点。

在幽默的一面，我找到了我们现在正在查看的页面，我刚刚查看了后导航按钮问题的解决方案，我刚刚在当前网站修订期间遇到了这个问题。我在2014年的答案中找到了答案！我忘记了那个细节。

Answer 4

$（selector）应为$（“＃selector”）

用于在jquery中选择ID你需要一个哈希标记

Answer 5

我为需要简单分页列表的项目构建并共享了我自己的jquery移动分页插件。基本上，插件会在列表末尾添加“显示更多”按钮，您可以配置通过Ajax调用返回的“每页”项。当然，您需要在服务器端挂钩偏移和限制，但总的来说，我认为它非常直接且有用。试一试http://listomatic.stakbit.com/

如何让这个jquery分页插件正常工作

5 个答案: