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

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …

no image

gulpインストールとタスクの実行

今更ですが、gulpインストールと作業に関して。 less使ってたんですが、コンパイルをずっとatomのエディタで行っていたんですが、一般的にはgulpで実行する方のほうが多いでしょう。 別件でgul …

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

JavaScriptのコールバック関数について

Angularをやるうえで前提となるJavaScriptの知識を書いていこうかと。 関数を変数として扱い、別の関数の引数にできる JavaScriptの特徴の1つとして関数を変数のように扱えるというの …

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …