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

【问题标题】：how to get this jquery pagination plugin to work properly如何让这个 jquery 分页插件正常工作
【发布时间】：2013-02-06 08:31:19
【问题描述】：

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

【问题讨论】：

提供演示：jsbin.com
@Web_Designer jsbin.com/obacig/1/edit

标签： javascript jquery html pagination

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我也遇到了同样的问题。查看文档后，该工具似乎只是用于渲染分页工具，我们需要自己处理如何绑定数据。

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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>

【讨论】：

【解决方案5】：

自发布此问题以来已过去三年。您可能会在此2014 stackoverflow page 上找到更好的答案。特别是，看看 Bilal Akil 的答案，以及我自己的贡献，直接低于他。

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

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

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

【讨论】：