5

ページングにjqueryページネーションプラグインを使用しています...ページネーションプラグインが1つある場合、問題はありません...しかし、2つある場合、1つは機能しているようですが、もう1つは機能していないようです...これが私のコードです。

<div id="PagerUp" class="pager">

</div><br /><br /><br />
    <div id="ResultsDiv">

</div>
<div id="PagerDown" class="pager">

</div>

そして、私のjqueryには、

<script type="text/javascript">
         var itemsPerPage = 5;
         $(document).ready(function() {
             getRecordspage(0, itemsPerPage);
             var maxvalues = $("#HfId").val();
             $(".pager").pagination(maxvalues, {
                 callback: getRecordspage,
                 current_page: 0,
                 items_per_page: itemsPerPage,
                 num_display_entries: 5,
                 next_text: 'Next',
                 prev_text: 'Prev',
                 num_edge_entries: 1
             });
         });

</script>

これが私が得ているものです...

代替テキスト http://img52.imageshack.us/img52/5618/pagerse.jpg

どちらも機能しますが、選択したページを見てください.... pagerupjqueryで1つのページャーを他のページャーのコールバックイベントで変更する方法....3PagerDown1

編集: mef のアイデアを使用してもうまくいかないようです...

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="Stylesheet" type="text/css" href="CSS/Main.css" />
      <script type="text/javascript" src="Javascript/jquery.pagination.js">
      </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".pager").pagination(300, { callback: pagecallback,
                current_page: 0,
                items_per_page: 5,
                num_display_entries: 5,
                next_text: 'Next',
                prev_text: 'Prev',
                num_edge_entries: 1
            });
        });
    function pagecallback() {
        var paginationClone = $("#Pagination > *").clone(true);
        $("#Pagination2").empty();
        paginationClone.appendTo("#Pagination2");
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

<div class="pager" id="pagination">
  <!-- the container for your first pagination area -->
</div>

<div id="results">
  <!-- the container where you show your results -->
</div>

<div class="pager" id="Pagination2">
  <!-- the container for your second pagination area -->
</div>
    </div>
    </form>
</body>
</html>
4

2 に答える 2

13

これは公式にサポートされていないようですので、ここに回避策があります ( working demo )。

ステップ 1 次のように HTML マークアップを作成します。

<div class="pagination" id="Pagination">
  <!-- the container for your first pagination area -->
</div>

<div id="results">
  <!-- the container where you show your results -->
</div>

<div class="pagination" id="Pagination2">
  <!-- the container for your second pagination area -->
</div>

ステップ 2アイデア:最初のページネーション div でいつも
のよう にページネーション プラグインを使用することが今のアイデアです。さらに、ページが変更されるたびに、最初のページネーション div のすべてのコンテンツを 2 番目のページネーション div にコピーしたいと考えています。

ステップ 3 pageSelect-callback を微調整し
ます。コールバック関数の最後に次の行を追加します。

var paginationClone = $("#Pagination > *").clone(true);
$("#Pagination2").empty();
paginationClone.appendTo("#Pagination2");

withDataAndEvents呼び出しにブール値パラメーター ( )を含めることが非常に重要です.clone。そうしないと、ページネーションのコピーにクリック イベントが含まれません。

これで、ページ編集要素をクリックするたびに (オリジナルかコピーかに関係なく)、ページが変更され、それに応じてページ編集要素が更新されます。

于 2010-04-12T11:24:34.160 に答える
2

おそらく、これはあなたが望んでいた答えではありませんが、同じページに 2 つのページャーを持つことは現在の実装ではサポートされていないことを示唆する jQuery Pagination プラグインの機能要求があります。

http://plugins.jquery.com/node/11825

于 2010-04-11T12:54:07.887 に答える