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

前端之家收集整理的这篇文章主要介绍了javascript – 如何让这个jquery分页插件正常工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直试图让这个 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

解决方法

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

首先,你在选择器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,onPageClick: function(pageNumber){test(pageNumber)}
        });
    });
    </script>

</body>
</html>
原文链接:https://www.f2er.com/jquery/159758.html

猜你在找的jQuery相关文章