5

我使用jquery分页插件进行分页...如果有一个分页插件对我来说没有问题...但是如果有两个似乎可以工作但另一个似乎也不起作用...这是我的代码，

<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

两者都有效，但查看pagerup所选页面3只是PagerDown显示1....如何在 jquery 中更改其他寻呼机回调事件中的一个寻呼机....

编辑： 使用 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

由于这似乎没有得到官方支持，这里有一个解决方法（工作演示）。

步骤 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 的所有内容复制到第二个分页 div。

步骤 3调整 pageSelect-callback：
在回调函数的末尾添加以下行：

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

withDataAndEvents在调用中包含布尔参数 ( )非常重要.clone，否则您的分页副本不会有任何点击事件。

现在，每次你点击一个分页元素（不管它是原始的还是副本的），页面都会改变，分页元素也会相应地更新。

于 2010-04-12T11:24:34.160 回答
2

可能这不是您希望的答案，但是 jQuery Pagination 插件的功能请求表明当前实现不支持在同一页面上拥有两个寻呼机：

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

于 2010-04-11T12:54:07.887 回答