LoginSignup
5
4

More than 5 years have passed since last update.

DataTablesのExtension、ColVisのイベント発火を手動でやる方法

Last updated at Posted at 2014-09-15

DataTablesとは、リッチなテーブルを構築するjQueryライブラリです。
この記事はそのDataTablesのExtensionの一つであるColVisを使うものです。

DataTables
ColVis
capture.png

ColVisとは、テーブルの列の表示・非表示を制御するウィンドウを開くライブラリです。しかし、このライブラリを使うためのボタン設置方法がひとつしかなく、またBootstrap等を使っていると見た目が合わないため、自分で設置したオブジェクトにイベント発火して開けるようになると便利です。

コード

  var table = $("#myTable").dataTable();
  var colvis = new $.fn.dataTable.ColVis(table, {
    restore: "元に戻す",
    showAll: "全ての項目を表示",
    showNone: "全て隠す",
    // ここでtrueにしないとウィンドウ座標をいじっても反映されない
    bCssPosition: true,
  });
  // 設定ウィンドウを開くボタンか何か
  $("#action-view-setting").on("click", function(e) {
    e.preventDefault();
    var pos = {};
    var target = $(this);
    pos.x = target.offset().left;
    pos.y = target.offset().top + target.outerHeight();
    // dom.collection が設定ウィンドウ本体
    $(colvis.dom.collection).css({
      position: "absolute",
      left: pos.x, top:pos.y
    });
    // 設定ウィンドウを表示するためのアンドキュメントAPI
    colvis._fnCollectionShow();
  });
5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4