QA@IT

DataTablesでorder.listenerというAPIの意味について

3688 PV

以下のドキュメントを見て、動作させてみたのですが、どうも想定通りに動かないので、ご相談します。
http://datatables.net/reference/api/order.listener()

このorder.listenerを使うと、任意のタグにソートのイベントを結びつける事ができるのでは、と思ったのですが、違うのでしょうか?
例えば、こんなJavaScriptのソースを書いたとします。

var table = $('#hoge_table').DataTable();
table.order.listener( '#hogehoge', 0 ,function(){
      console.log('abc');
    });

そして、HTMLには以下のようなタグを準備します。テーブルの内容はダミーです。

<span id="hogehoge">hogehoge</span>
<table id="hoge_table">
 <tr>
   <th></th>
 </tr>
 <tr>
   <td></td>
 </tr>
</table>

こうすると、spanタグの「hogehoge」という箇所をクリックする事で、テーブルのソート機能を呼び出すことが出来るのでは…と思ったのですが、動作しなかったのです。
これは違う目的で使うものなのでしょうか?

  • order.listenerはtable内の包括されたタグに対してlistenerするという意味では?
    table外のタグでイベントを作るのはやはり個別にclick等設定するのではないでしょうか?
    -
  • 確かに言われてみると、そうかもしれないです…。よく考えたらtableの外までDataTablesに管理させるってのは無理がある気がしますね。ちょっと考え方に無理がある気がしてきました。 -

回答

公式ドキュメントがおいついてないのか、とりあえずサンプル通りだと動きませんね。

このプラグインは初めて触ったのでもっと効率の良いやり方があるかもしれませんが以下の様にすれば動きます。

var tableS = $('#hoge_table').DataTable(); 
// Sが大文字なのは強調のため。小文字にしていいです。

var table = tableS.table('#hoge_table');
table.order.listener( $('#hogehoge'), 0, function(){ 
      console.log('abc');
    });

動作するサンプル: http://jsfiddle.net/jnrq7dhb/4/
「click me」という文字をクリックして下さい

時間がないので簡単に説明します。

ドキュメントの間違いとしては、

  1. $(selector_for_table).dataTable() は orderプロパティを持たないし、tableファンクションも持たないので、orderまでたどり着けない。

  2. $(selector_for_table).DataTable() も orderを持たない。
    そういうエラーが出ていたので、
    http://datatables.net/reference/option/order とか http://datatables.net/reference/api/table()
    とか、Chromeのコンソールみていて、多分
    $(selector_for_table).DataTable().table(selector_for_table).order.listener;
    は存在しそうだと思って試してみたらlistenerまではたどり着けました。明らかに無駄があるので、もっといいtableオブジェクトの取り方があるような気がします。

  3. 最後に listenerの第一引数にはセレクタ文字列じゃなくてjqueryオブジェクトを入れる
    セレクタの文字列だと jquery.dataTables.js 5000行目でオブジェクトを見つけられていない感じでこけていて、そこもかよと思わずツッコんでしまいました。$(セレクタ) で渡せば動作しましたので多分あっていると思います。

できたら作者にフィードバックされるといいかもしれません。
ちょっと時間がないので動いたというだけでなんの検証もしていませんが参考にどうぞ。

編集 履歴 (1)
  • ありがとうございます。これ、調査するの本当に大変だったと思います。ご迷惑をおかけしてしまい、申し訳ありません。
    まずはorder.listenerを探す所からはじめないといけなかったのですね。
    時間がかかりすぎてしまい、違う方法を検討する事にしました。
    本当にありがとうございます。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。