jQuery datatables Twitter/facebook style paging

Question

Я искал подходящий ресурс о том, как это сделать без везения. Я использую плагин jQuery datatables с обработкой serveride вместе с включенной конвейерной обработкой (example). У меня это работает в моем проекте asp.net webforms и будет переходить в MVC для будущих проектов. Я забочусь о обработке на стороне сервера с найденным классом Here. Я также просматриваю найденную статью Here, связанную с разбиением на страницы.

В основном то, что мне нужно сделать, это создать этот тип пагинации с обработкой на стороне DataTables плагина и сервера (конвейерный не обязательно важно здесь)

Примечание: Твиттера/стиль пейджинг Я имею в виду либо чтобы:

• одна кнопка в нижней части таблицы, который возвращает дополнительные результаты приложенных к существующему содержанию в таблице
• дополнительные результаты с загрузкой бесконечно как пользователь достигает конца текущих результатов с помощью прокрутки (ПРИМЕЧАНИЕ. Я обнаружил, что эта функциональность встроена в плагин datatables, поэтому мне нужно сосредоточиться на предыдущем методе).

В конечном счете, я хотел бы иметь выбор между обоими типами разбивки на страницы выше.

Есть ли у кого-нибудь хорошие советы и/или образцы/учебные пособия?

Answer 1

Я разработал подключаемый модуль PageLoadMore, который позволяет заменить элемент управления разбиением по умолчанию кнопкой «Загрузить больше».

1. Включите JavaScript-файл подключаемого модуля после загрузки файлов jQuery и jQuery DataTables.
2. Добавить кнопку «Загрузить еще» с ID btn-example-load-more после таблицы.

3. Используйте следующий код для инициализации таблицы:

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

this example См для кода и демонстрации.

Дополнительную информацию см. jQuery DataTables: "Load more" button.