DataTables 확장, ColVis 이벤트를 수동으로 시작하는 방법

데이터 테이블은 집합 테이블을 구축하는 데 사용되는 jQuery 라이브러리입니다.
이 글은 DataTables의 확장 중 하나인 ColVis를 사용합니다.
DataTables
ColVis

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();
  });

좋은 웹페이지 즐겨찾기