skillup

技術ブログ

JavaScript

dataTableによる無限スクロール

投稿日:

Angularで無限スクロールをやったので一般のjqueryで。

dataTablesというプラグインです。

以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。

ページャープラグイン dataTable

公式

https://datatables.net/

ディフォルトだと無限スクロールではなく、ページ番号をつけてページャーリンクをクリックしたり、一画面に表示する件数をボタンで変えたりするプラグインのようですが、応用することで無限スクロールに対応させられます。

たとえば日本中の郵便番号を一覧表示するページがあり、これを無限スクロールで下記のように読み込むとします。

dataTable

※一般的な無限スクロールと違い、見えている部分が常に一定になります。

このプラグインに限らずですが、ようは無限スクロールのポイントはどんなプラグインでも下記のようなところだと思います。

  • スクロール量をJavaScript側で検知する
  • 検知した場合プログラムにlimit,offsetの情報をつけてGETでアクセスする(一般的にはひたすら追加していくものが多いlimitはいらないことが多いかもです。)
  • その情報をもとにフロント側にデータを返す

インストール

dataTablesとdataTableのプラグインであるdatatables.net-scrollerも同時に読み込みます。datatables.net-scrollerがないと、スクロールしてもアクセスがサーバー側に飛ばないので注意です。

bowerで下記のようにインストールできます。

https://datatables.net/download/bower

ソース

HTML/JS側

PHP側

発行されるURLは下記のようなものです。

※プラグインがスクロールを検知すると自動的に下記のようなURLを生成します。

今回重要な情報としてはlimitとoffsetですが、limitに相当するものがiDisplayLengthでoffsetがiDisplayStartです。また一番最初に画面にアクセスしたとき(スクロールをしていないとき)はiDisplayStart =0 , iDisplayLength =9でした。

これだと初回のページを読んだ時に空きができちゃうんですよね・・プロパティにいれて変えようとしましたが、反映されないので私の場合初回時(sEcho=1)のときに多めに読み込むようにしました。

参考リンク

http://etc9.hatenablog.com/entry/20121030/1351614754
http://qiita.com/tq_jappy/items/a256b74db3ff2f9071f2

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

vueの環境構築

vueについて勉強したことなどを。 Contents1 vueとは?1.1 方法1 CDN1.2 方法2 npm+コンパイル vueとは? 近年のJavaScriptフレームワークの一種で「双方向デー …

no image

vue-routerについて

vueでのルーティングに関して。 Vueの場合、いわゆるSPA(シングルページアプリケーション)という用途で使われることがあると思います。 ただその場合でも擬似的なルーティング(URLの切り替えなどに …

no image

GoogleMapのカスタマイズ

GoogleMapの埋め込みってよくある要件だと思うのですが、先日、GoogleMapに色(企業カラー)をつけたいという要望がありました。 てっきり埋め込み1行で解決すると思いましたが、色々と調べるこ …

no image

モジュールバンドラrollupについて

モジュールバンドラというと一般的にはwebackが一般的ですが、rollupというモジュールバンドラを調査したところ、良さげな感じなので、ちょっとメモ。 サンプル https://github.com …

no image

Angular概論 モジュール、コントローラー、スコープなど

Contents1 Angularインストール2 ソース2.1 モジュール、スコープとコントローラ2.1.1  モジュールとは2.1.2 コントローラーとは2.1.3 スコープとは3 参考リンク An …