jQueryのデータシートTwitter/facebookスタイルのページング

Question

私は運がないとこれを行う方法について、良いリソースを探しています。私はjQuery datatablesプラグインをserverside処理と共に使用していて、パイプライン処理を有効にしています（example）。私はこれをasp.net webformsプロジェクトで作業しており、今後のプロジェクトではMVCに移行します。私は、サーバー側の処理を世話しています。クラスはHereです。私はまた、ページ分割に関連した記事Hereを見てきました。

は基本的に私は何をする必要があるか

NOTE（パイプラインは、ここで必ずしも重要ではありません）のDataTableのプラグインとサーバー側の処理とページネーションのこのタイプを作成することです：私は言及していますさえずりことで /スタイルのページングのいずれか全

• ユーザとして無限ロードテーブル内の既存のコンテンツに追加追加の結果
• 追加の結果を戻す表の下部に単一のボタンスクロールで現在の結果の最後に到達します（注：この機能はdatatablesプラグインに組み込まれているため、前の方法に焦点を当てる必要があります）。

最終的に私は上記のページ設定の両方のスタイルのどちらかを選択したいと思います。

誰かが良いアドバイスやサンプル/チュートリアルを共有していますか？

Answer 1

私は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を参照してください。