同一页面中的两个jquery分页插件似乎不起作用答案

【问题标题】：Two jquery pagination plugin in the same page doesn't seem to work同一页面中的两个jquery分页插件似乎不起作用
【发布时间】：2012-12-13 06:26:51
【问题描述】：

我使用 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>

这是我得到的......

alt text 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>

【问题讨论】：

标签： jquery plugins pagination jquery-pagination

【解决方案1】：

由于这似乎没有得到官方支持，这里有一个解决方法 (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 的所有内容复制到第二个分页 div。

第 3 步调整页面选择回调：
在回调函数的末尾添加以下行：

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

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

现在，每次你点击一个分页元素（无论是原版还是副本），页面都会发生变化，分页元素也会相应更新。

【讨论】：

@Pandiya Chendur：我添加了一个演示链接——它有效。您的第一个分页 ID 中有错字。
@Mef 辉煌...Clone 真的很管用...像您这样的人让这个论坛如此特别...
@Mef 如果可能的话建议我回答这个问题stackoverflow.com/questions/2591295/…
stackoverflow.com/questions/13871357/…有一个相关的问题

【解决方案2】：

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

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

【讨论】：