2010-04-09 30 views
5

Sayfalama için jquery pagination eklenti kullanıyorum ... Bir sayfalama eklentisi varsa benim için sorun yok ... Ama iki tane varsa ... İşte Aynı sayfada iki jQuery pagination eklentisi işe yaramıyor gibi görünüyor

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

i alıyorum ne işe ancak diğer çok ... İşte görünmüyor benim kodu

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

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

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

</div> 

Ve benim jquery sahip

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

Her iki eser ancak seçilen sayfa 3 olduğunu pagerup bak ama PagerDown gösterileri 1 .... Nasıl jquery diğer çağrı cihazları geri arama olayı bir çağrı .... değiştirmek için

DÜZENLEME: MEF fikrini kullanarak Muhtemelen bu umuyorduk cevap değil, ama aynı sayfada iki çağrı cihazları sahip olduğunu göstermektedir jQuery Sayfalandırmayı eklentisi için bir özellik isteği var ... çalışmaya

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

cevap

12

resmen desteklenecek görünmüyor, burada bir çözüm (working demo) 'dir. aşağıdaki gibi

Adım 1 HTML biçimlendirmesi oluşturun:

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

Adım 2 fikir: fikri ilk sayfalama div ile zamanki olarak sayfalama eklentisi kullanmak artık
. Ancak ek olarak, bir sayfa değişikliği gerçekleştiğinde, ilk sayfalama div'inin tüm içeriğini ikinci sayfalandırma div'ına kopyalamak istiyoruz.

Adım 3 Tweak pageSelect-geri arama:
geri arama işlevi sonuna aşağıdaki satırları ekleyin:

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

O .clone ile boolean parametre (withDataAndEvents) dahil etmek çok önemlidir arama, aksi takdirde sayfa numaranızın kopyasının hiçbir tıklama etkinliği olmaz.

Şimdi, bir sayfalandırma öğesine tıklattığınızda (orijinal veya kopya olup olmadığına bakılmaksızın), sayfa değişir ve sayfalandırma öğeleri buna göre güncellenir.

+0

@mef, benim için işe yaramıyor ... –

+0

@Pandiya Chendur: bu kesinlikle işe yarıyor. Id üzerinde çift kontrol vb ... – Leo

+0

@Mef benim sorgunun benim düzenlenmiş bir parçası benim baktığım şey ... –

İlgili konular