2010-04-09 11 views
5

Uso el plugin de paginación jquery para paginación ... Si hay un plugin de paginación no hay problema para mí ... Pero si hay dos, parece que uno trabajar, pero el otro no parece demasiado ... Aquí está mi código,Dos plugin de paginación de jquery en la misma página no parece funcionar

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

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

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

</div> 

Y mi jQuery tiene,

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

Esto es lo que estoy haciendo ...

alt text http://img52.imageshack.us/img52/5618/pagerse.jpg

Ambas obras pero mira el pagerup la página seleccionada es 3 pero los espectáculos PagerDown1 .... cómo cambiar un busca en otro evento localizadores de devolución de llamada en jQuery ....

EDIT: la idea de usar MEF no parece funcionar ...

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

Respuesta

12

Dado que este no parece ser el apoyo oficial, aquí es una solución (working demo).

Paso 1 Crear su marcado HTML de la siguiente manera:

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

Paso 2 La idea:
La idea ahora es usar el plugin de paginación como de costumbre con la primera div paginación . Pero, además, queremos copiar todo el contenido del primer div de paginación al segundo div de paginación cada vez que se produce un cambio de página.

Paso 3 Tweak la pageSelect-devolución de llamada:
añadir las siguientes líneas al final de su función de devolución de llamada:

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

Es muy importante incluir el parámetro booleano (withDataAndEvents) con el .clone llamar, de lo contrario, la copia de su paginación no tendrá ningún evento de clic.

Ahora, cada vez que haga clic en un elemento de paginación (independientemente de si es el original o la copia), la página cambiará y los elementos de paginación se actualizarán en consecuencia.

+0

@mef no parece funcionar para mí ... –

+0

@Pandiya Chendur: esto definitivamente funciona. Verificación doble en la identificación, etc ... – Leo

+0

@Mef mira mi parte editada de mi pregunta que es lo que usé ... –

2

Probablemente esto no es la respuesta que usted esperaba, pero hay una solicitud de función para el plugin de jQuery paginación que sugieren que tener dos localizadores en la misma página es n ot con el apoyo de la implementación actual:

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

Cuestiones relacionadas