jQuery veri sayfaları Twitter/facebook style paging

Question

Şanssız bir şekilde nasıl yapılacağına dair iyi bir kaynak araştırıyorum. Ben jQuery datatables eklenti ile pipelining etkin (example) sunucu taraflı işleme kullanarak kullanıyorum. Bunu asp.net webforms projesinde çalışıyorum ve gelecekteki projeler için MVC'ye taşınacağım. Here sınıfında sunucu tarafı işlemeye dikkat ediyorum. Ayrıca, sayfalandırma ile ilgili Here numaralı makaleyi inceledim.

Temelde yapmam gerekeni

NOT (ardışık düzen burada mutlaka önemli değildir) datatables eklentisi ve sunucu tarafında işleme ile pagination bu tip yaratmak: Ben bahsediyorum twitter By /stil çağrı ya için:

• kullanıcı olarak sonsuz yükleme tabloda mevcut içeriğine eklenir ek sonuçlar
• ilave sonuçları geri getiren bu tablonun alt kısmında tek bir tuşa kaydırma ile mevcut sonuçların sonuna ulaşır (NOT: Bu işlevin datatables eklentisine yerleştirildiğini keşfettim, böylece önceki yönteme odaklanmalıyım).

Sonuçta ben yukarıdaki şekilde sayfa numarası her iki stilleri arasında seçim yapmak istiyorum.

Herkesin iyi bir tavsiyesi ve/veya örnekleri/eğiticileri paylaşmak için var mı?

Answer 1

"Daha fazla yükle" düğmesiyle varsayılan sayfalandırma denetiminin yerini almayı sağlayan PageLoadMore eklentisini geliştirdim.

1. jQuery ve jQuery DataTable dosyalarını yükledikten sonra eklentinin JavaScript dosyası dahil edin.
2. Tablodan sonra btn-example-load-more kimliğine sahip "Daha fazla yükle" düğmesine basın.

3. tabloyu başlatmak için aşağıdaki kodu kullanın:

   $(document).ready(function(){ 
       var table = $('#example').DataTable({ 
        dom: 'frt', 
        ajax: 'https://api.myjson.com/bins/qgcu', 
        drawCallback: function(){ 
        // If there is some more data 
        if($('#btn-example-load-more').is(':visible')){ 
         // Scroll to the "Load more" button 
         $('html, body').animate({ 
          scrollTop: $('#btn-example-load-more').offset().top 
         }, 1000); 
        } 
   
        // Show or hide "Load more" button based on whether there is more data available 
        $('#btn-example-load-more').toggle(this.api().page.hasMore()); 
        }  
       }); 
   
       // Handle click on "Load more" button 
       $('#btn-example-load-more').on('click', function(){ 
        // Load more data 
        table.page.loadMore(); 
       }); 
   }); 
   

kodu ve gösteri için this example bakınız.

Daha fazla örnek ve ayrıntı için jQuery DataTables: "Load more" button adresine bakın.