jQuery datatables Strona w stylu Twitter/facebook

Question

Szukałem dobrego zasobu, jak to zrobić bez powodzenia. Korzystam z wtyczki jQuery datatables z przetwarzaniem serveride wraz z włączonym potokiem (example). Mam to działa w moim projekcie internetowym asp.net i będzie się przeprowadzać do MVC dla przyszłych projektów. Zajmuję się przetwarzaniem po stronie serwera z klasą Here. Przeglądam również artykuł znaleziony pod numerem Here związany z paginacją.

zasadzie to, co muszę zrobić, to stworzyć tego typu paginacji z przetwarzaniem bocznej DataTables plugin i serwerów (rurociąg niekoniecznie jest tu ważne)

UWAGA: przez Twitter/style stronicowania mam na myśli zarówno do:

• Jeden przycisk na dole tabeli, która przywraca dodatkowe wyniki zostały dołączone do istniejącej zawartości w tabeli
• dodatkowe wyniki loading nieskończenie jako użytkownik osiąga koniec bieżących wyników poprzez przewijanie (UWAGA: Odkryłem, że ta funkcjonalność jest wbudowana w plugin datatables, więc muszę się skupić na poprzedniej metodzie).

Ostatecznie chciałbym mieć wybór między obydwoma stylami paginacji powyżej.

Czy ktoś ma jakieś dobre rady i/lub próbki/samouczki do udostępnienia?

Answer 1

Opracowałem wtyczkę PageLoadMore, która umożliwia zastąpienie domyślnej kontroli paginacji za pomocą przycisku "Załaduj więcej".

1. Dołącz plik JavaScript wtyczki po załadowaniu plików jQuery i jQuery DataTables.
2. Dodaj przycisk "Załaduj więcej" z identyfikatorem btn-example-load-more po tabeli.

3. Użyj poniższego kodu, aby zainicjować tabeli:

   $(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(); 
       }); 
   }); 
   

Zobacz this example kodu i demonstracji.

Aby uzyskać więcej przykładów i szczegółów, zobacz stronę jQuery DataTables: "Load more" button.