Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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();
  });
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away