skillup

技術ブログ

JavaScript

dataTableによる無限スクロール

投稿日:2017年6月7日 更新日:

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

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

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

ページャープラグイン dataTable

公式

https://datatables.net/

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

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

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

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

  • スクロール量を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)のときに多めに読み込むようにしました。

参考リンク

HTML テーブルをナイスに扱う DataTables 〜Ajax編〜

-JavaScript
-

執筆者:


comment

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

関連記事

no image

vueでのコンポーネント間の変数のやりとりに関して

vueをコツコツと勉強していますが、コンポーネント間で変数の受け渡しをしたいときなどは色々注意が必要かと思います。 個人的には下記のような解釈で組んでおります。 Contents1 vuex2 syn …

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

no image

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …

no image

AngularJSでのinfite_scroll

今回もAngularネタです。 一般的なデータの一覧画面ではページャーをボタンで移動するのではなく、スクロールするだけで次々とアクセスできるようになるのが一般的でしょう。 facebookやtwitt …

no image

vueについてのポイントその3(主に親子関係について)

最近またvueにポチポチ触っているので再度復習。 主に値の監視に関して。コードは一切なく主に概念的なものに関して。 コンポーネント間では基本的にダイレクトに値のやり取りができない というかコンポーネン …

アーカイブ