7

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

4

5 回答 5

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>
于 2013-03-14T17:37:18.487 回答
5

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>
于 2014-07-22T21:38:25.743 回答
1

自这个问题发布以来已经过去了三年。您可能会在此2014 stackoverflow 页面上找到更好的答案。特别是，看看 Bilal Akil 的答案，我自己的贡献就在他的正下方。

我也完全被如何使用 simplepagination.js 弄糊涂了，Bill (Bilal) 向我展示了方法。他的网络文章应该可以为您解决问题，但我在 2014 年 stackoverflow 文章中发布的简单版本是我仍在使用的版本，它仍然有效。

如果您使用该版本，或者也可能使用 Bill 当前的修订版本，您应该始终将 #page-n 附加到您在自己网站中放置到您自己页面的任何链接 URL，除非您已实现 target="_blank" ---即使关闭它仍然会让用户访问页面（必要的是帮助后退导航按钮工作）。我在 2014 年文章中的回答对此进行了解释。

幽默的一面是，我在寻找返回导航按钮问题的解决方案时发现了我们现在所在的页面，这是我刚刚在当前网站修订期间遇到的问题。我在自己 2014 年的答案中找到了答案！我忘记了那个细节。

于 2016-11-08T08:39:20.523 回答
0

$(selector) 应该是 $("#selector")

要在 jquery 中选择 ID，您需要一个哈希标签

于 2013-02-21T05:50:23.363 回答
0

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

于 2013-03-19T03:12:19.210 回答