2011-01-22 108 views
5

我一直在尋找一個很好的資源如何做到這一點,沒有運氣。我正在使用jQuery數據表插件以及啓用流水線的服務器處理插件(example)。我有這個工作在我的asp.net webforms項目,並將轉移到未來項目的MVC。我正在照顧服務器端處理與類找到Here。我也一直在尋找與分頁有關的文章HerejQuery datatables Twitter/Facebook風格的傳呼

基本上我需要做的是創建這種類型與數據表插件與服務器端處理分頁的(流水線是不是在這裏一定很重要)

注: 由Twitter /風格傳呼我指的是無論是到:

  • 在該帶回在表附加到現有的內容的附加結果
  • 附加結果無限加載作爲用戶表中的底部的單個按鈕通過滾動到達當前結果的結尾(注意:我發現這個功能是內置在數據表插件中的,所以我需要關注以前的方法)。

最終我想在上面兩種分頁樣式之間進行選擇。

有沒有人有任何好的建議和/或樣品/教程分享?

+0

這有沒有想通?兩年後我有同樣的問題。 – 2013-05-31 22:08:55

回答

0

我開發了PageLoadMore插件,允許用「加載更多」按鈕替換默認分頁控件。

  1. 加載jQuery和jQuery DataTables文件後包含插件的JavaScript文件。
  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