Bootstrap jQeuryプラグインサンプル

jQuery DataTables dataTablesとDataTablesの違いは?fnXXX関数がない?

Posted 1月 31 2015 by 小野 茂  ,

fnXXX系の関数がないので、DataTablesの古いバージョン(1.9.x以前)と最新版(1.10.x以上)を利用している人は、はまります。(きっと)

最新版のDataTablesを利用して2時間程はまったので備忘録。
DataTables 1.10.4 (2015.01.31) が最新ですが、旧バージョン(1.9.x以前) は関数が fnXXX というものでしたが、最新では無くなっています。
行の追加に利用している fnAddData() がない!と驚きました。

最新のapiを見てみると、インスタンスの方法は3つあると紹介されています。

$( selector ).DataTable();

$( selector ).dataTable();

new $.fn.dataTable.Api( selector );

1番目と2番目は何が違うのかというと、DataTablesの一文字目が大文字が小文字の違いです。
古いほうは小文字(1.9.x以前)で新しい方が大文字(1.10.x以上)です。
先頭が小文字 $(selector).dataTables(); の場合は、旧関数が利用できます。

dataTableの関数を見てみる

javascriptの関数を見るのに使った関数は以下です。
<table class=”table dataTables”>でテーブルを用意しておきます。

<script>
	var table;
	$(function(){
		table	= $('.dataTables').dataTable();	// classにdataTablesと指定があるセレクターを対象とします。
		var names;
		for(var name in table){
			names += name + ', ';
		}
		console.log(names);
	});
</script>

拡張for文を利用して、nameにDataTablesの関数を代入します。それをカンマで結合しカンマ区切りで出力します。
オブジェクトの内容を知りたい場合は便利なので、覚えておくとよく使うプログラムです。

出力結果

  • api
  • fnAddData
  • fnAdjustColumnSizing
  • fnClearTable
  • fnClose
  • fnDeleteRow
  • fnDestroy
  • fnDraw
  • fnFilter
  • fnGetData
  • fnGetNodes
  • fnGetPosition
  • fnIsOpen
  • fnOpen
  • fnPageChange
  • fnSetColumnVis
  • fnSettings
  • fnSort
  • fnSortListener
  • fnUpdate
  • fnVersionCheck
  • oApi
  • dataTable
  • dataTableSettings
  • dataTableExt
  • DataTable

※出力内容が多いので、抜粋しています。
 _fnXXXというアンダーバーがついている関数名が出てくるのですが、private関数なので使わない方がよいと思います。

内容を見てみると、レガシー(旧関数)が存在します。

では、大文字のDataTablesの内容はどうなっているのでしょうか。

  • context
  • selector
  • tables
  • table
  • draw
  • page
  • ajax
  • rows
  • row
  • columns
  • column
  • cells
  • cell
  • order
  • search
  • state
  • $
  • on
  • one
  • off
  • clear
  • settings
  • data
  • destroy
  • concat
  • each
  • eq
  • filter
  • flatten
  • join
  • indexOf
  • iterator
  • lastIndexOf
  • length
  • map
  • pluck
  • pop
  • push
  • reduce
  • reduceRight
  • reverse
  • shift
  • sort
  • splice
  • toArray
  • to$
  • toJQuery
  • unique
  • unshift

※jQueryの関数も含まれます。

レガシーのオブジェクトと比べると、jQueryの関数があっても少ないです。
かなりスッキリしたように見えますね。
そして、綺麗さっぱりfnXXXという関数がなくなっています。ないですね。ないです。

.dataTable()で作成したインスタンスで新関数を利用するためには

var table = $(selector).dataTable();

上記で作成した table のインスタンスで新関数を利用するためには、.api() 関数を呼び出します。

新、旧にて行挿入のコード比較

旧コード(レガシーコード(1.9.x以前))

var table	= $('.dataTables').dataTable();
table.fnAddData([
	'100', '追加ホゲホゲ', 'ホゲホゲ区', 'hogehoge@hogehoge.com', '00-0000-0000'
]);

私は1.9以前から利用しているので、かなり見慣れたコードです。

新コード(1.10.x以上)

var table	= $('.dataTables').DataTable();
table.row.add([
	'200', '追加ホゲホゲ', 'ホゲホゲ区', 'hogehoge@hogehoge.com', '00-0000-0000'
]).draw();

スキーマ定義を行い、より直感的になっているのは分かります。
ただ、正直ここまで変わると驚きです。
オブジェクト、振る舞いをちゃんと命名して綺麗にまとめています。
新しいものから利用するにはかなり便利になったと思います。
最新ソースの中をみると、レガシー連携のためにフラグで切り分けしているロジックが多々見られます。
その内レガシーを切り捨てる方向で処理速度を上げるかも知れませんね。

旧コード(レガシーコード(1.9.x以前))にて新関数の利用

var table	= $('.dataTables').dataTable();
table.api().row.add([
	'200', '追加ホゲホゲ', 'ホゲホゲ区', 'hogehoge@hogehoge.com', '00-0000-0000'
]).draw();

インスタンス.api().関数 という形で新関数を呼び出せます。
インスタンスに代入時に.api()を呼び出せばよいのですが、どこで動かなくなるかわからない場合は、この方法で一つ一つ修正するのが無難だと思われます。


Bootstrap DataTables JavaScript jquery



  未経験OKの仕事 |  上場企業の仕事 |  高待遇の仕事 |  外資系の仕事 |  社内SEで検索 |  自社サービスで検索





メールアドレス
ご質問・問い合わせ等、ご自由にお書きください。