2010-04-09 10 views
5

Io uso il plugin di impaginazione jQuery per il paging ... Se c'è un plug-in di impaginazione non c'è alcun problema per me ... Ma se ce ne sono due uno sembra lavorare ma l'altro non sembra troppo ... Ecco il mio codice,Due plug-in di impaginazione jQuery nella stessa pagina non sembrano funzionare

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

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

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

</div> 

E il mio jquery ha,

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

Ecco quello che sto ...

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

Entrambe le opere ma guarda il pagerup la pagina selezionata è 3 ma i PagerDown spettacoli 1 .... Come cambiare un pager su altri eventi cercapersone richiamata in jQuery ....

EDIT: utilizzando l'idea di MEF non sembra funzionare ...

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

risposta

12

Dal momento che questo non sembra essere ufficialmente supportato, ecco un workaround (working demo).

Fase 1 Crea il tuo markup HTML come segue:

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

Fase 2 L'idea:
L'idea è ora di usare il plugin impaginazione come al solito con il primo div impaginazione . Ma in aggiunta, vogliamo copiare tutti i contenuti del primo div di impaginazione sul secondo div di impaginazione ogni volta che si verifica un cambio di pagina.

Fase 3 Tweak il pageSelect-callback:
Aggiungere le seguenti righe alla fine della vostra funzione di callback:

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

E 'molto importante per includere il parametro booleano (withDataAndEvents) con la .clone chiama, altrimenti la copia della tua impaginazione non avrà alcun evento click.

Ora, ogni volta che si fa clic su un elemento di impaginazione (indipendentemente dal fatto che sia l'originale o la copia), la pagina cambierà e gli elementi di impaginazione si aggiorneranno di conseguenza.

+0

@mef non sembra funzionare per me ... –

+0

@Pandiya Chendur: questo funziona sicuramente. Doppio controllo su id ecc ... – Leo

+0

@Mef guarda la mia parte modificata della mia domanda che è quello che ho usato ... –

2

Probabilmente questa non è la risposta che speravano, ma c'è una richiesta di funzionalità per il plugin jQuery impaginazione che suggeriscono che avere due cercapersone sulla stessa pagina è il n ot sostenuto dalla implementazione corrente:

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

Problemi correlati