skillup

技術ブログ

Java JavaScript

ページャープラグイン dataTable

投稿日:2015年7月4日 更新日:

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。

自力で作成してもよいのですが、なかなかこれが面倒だったりします。

また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形式のものが多いですが、これを比較的簡単に実装できるプラグインがjQueryであったので紹介します。

DataTable

DataTableというプラグインを使えばかなり楽にこれを実装できます。

http://datatables.net/index

画面イメージ

このプラグインを使うと下記のような画面図が比較的簡単にできてしまいます。


pager

 

あ、ちなみに、データはすべてダミーデータです。

特徴としては

  • リンクを踏まなくてもスクロールするだけでデータが取得できる
  • スクロールが一定量を超えるとプログラムにアクセスし、データを取得する
  • データ自体はajaxで取得し、JSON形式に変換する
  • 従来のリンク形式(1,2,3 次)といったような表示もプロパティで切り替えられる

などでしょう。

スクロールするだけでページャーの表示ができるので便利ですね!

早速コードを見ていきましょう

コード

プロパティ

基本的にはプロパティですべてを制御していきますが、かなり設定が複雑で私もまだ完全には理解できていません。

本家のリンク(http://datatables.net/index)には仕様が乗っていますが、英語オンリーなので結構きついでしょう(汗)

上のソースでも必要最低限のものだけに絞ってあります。

“sDom”: “frtiS”

主に検索リンクの制御を行う部分で、この部分をいじるとページャーがリンク形式になったり、リンク形式のHTMLを変えたりすることができます。アルファベットを組み合わせて、表記を変えます。

下記リンクが詳しいですね。

テーブルのオプション

“sAjaxSource”

最も大事な部分でデータを直接取得するプログラムです。スクロール量が一定に達するとこのプログラムにアクセスします。

console

スクロールが一定になるとクロムのコンソール画面で上記のように通信が発生しているのがわかると思います。

“bServerSide”

サーバーと通信が発生するか否かです。通常はtrueですが、まれにfalseを使うこともあります。

“sScrollY”

レコードを表示している部分の幅です。

“oLanguage”

通常は英語表記なので、他の言語の表記にする場合、上記のようなプロパティをセットします。詳細は下記のプロパティです。

“sProcessing”

読み込み中に表示されるメッセージや画像です。

“sInfo”:500件中(1件~20件)などのメッセージを表示します。

総レコード数を_TOTAL_、レコード開始位置を_START_、レコード終了位置を_END_で表記します。

“sInfoEmpty”: ” 0 件中 0 から 0 まで表示”
レコードがなかった場合の表記をします。

JSON形式

ちなみにJSONは下記のような形式で吐かせています。

JSONに関してはhttp://www.jsoneditoronline.org/を使うとうまく整形してくれますので使うとよいでしょう。

Javaで扱う場合にはこのエントリーで紹介したJacksonというプラグインが便利です。ただクラスをJSONに変換したところ、うまくいかずMap形式にしたところ無事表示されました。

こんなところですね。まだまだ全然使いこなせていないのでもう少しいろいろと調査したいと思っています。

ちなみに下記リンクを参考にしました。

JQueryプラグインのDataTablesでAjax通信

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

-Java, JavaScript
-

執筆者:


  1. […] ページャープラグイン dataTable […]

comment

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

関連記事

no image

JSでの金額変換で気をつけることなど

以前、ちょっと特集した JSでの画面の金額集計 の続きです。 画面で帳票系のアプリを作ろうとしている時など、画面上の値から金額の合計金額を出すなどがよく見られます。 すごく基本的ですが、PHPに慣れて …

no image

AngularJSでのDB接続

AngularJSでデータベースへのアクセスをしたいときの処理を記述します。 注意点としては、なんといっても非同期なことです。同期させることも無理ではないようですが、基本非同期ですので、この点を理解し …

no image

dataTableによる無限スクロール

Angularで無限スクロールをやったので一般のjqueryで。 dataTablesというプラグインです。 以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。 ページャ …

no image

JavaScriptでのオブジェクト指向 クラス作成&インスタンス生成

JavaScriptというと一般的にはjQueryを使って画面の装飾をするスクリプト言語という認識が一般的かと思います。 しかし、JavaScriptでもPHPなどのようにオブジェクト指向的な思想は実 …

no image

プルダウン連動のJS+動的要素のイベント追記(ライブラリのイベント)

JSがらみでちょっとした小ネタを。 Contents1 プルダウン連動2 動的要素へのイベント追加(ライブラリのイベントなど) プルダウン連動 大カテゴリ→小カテゴリなどとあった場合に、新規だけではな …