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 を生成する必要があります

body 終了タグの直前で、次のスクリプトが必要です。

<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 に答える
0

シンプルなページ分割されたリストを必要とするプロジェクトのために、独自の jquery モバイル ページ分割プラグインを作成して共有しました。基本的に、プラグインはリストの最後に「もっと見る」ボタンを追加し、「ページごと」のアイテムが Ajax 呼び出しを介して返されるように構成できます。もちろん、サーバー側でオフセットと制限をフックする必要がありますが、全体としては非常に簡単で便利だと思います。試してみてくださいhttp://listomatic.stakbit.com/

于 2013-03-19T03:12:19.210 に答える
0

$(selector) は $("#selector") にする必要があります

jqueryでIDを選択するには、ハッシュタグが必要です

于 2013-02-21T05:50:23.363 に答える