HTML/CSS - W3.通信 https://a2d.webcraft.work 仕事や生活の中で役立つ情報をメモ書きし、よりよい環境構築をサポートするサイト Sat, 21 Jul 2018 05:11:34 +0000 ja hourly 1 https://wordpress.org/?v=5.9.13 jQueryのDataTablesで表示の制御を加える方法 https://a2d.webcraft.work/datatables_column/ https://a2d.webcraft.work/datatables_column/#respond Mon, 01 Aug 2016 15:23:36 +0000 http://a2d.webcraft.work/?p=860 リッチなテーブルを扱う事が出来るjQueryプラグインのDataTables。前回の記事では基本的な導入をする手順を紹介しました。

前回の記事は下記を参照。

jQueryのDataTablesでリッチなテーブルを使おう

今回はDataTablesのエクステンションであるColVis（column visibility）を使ってボタンによる列表示の制御を加える方法を紹介します。

列表示制御

ColVis（column visibility）を使った列表示の制御ボタンを加える方法

サンプルページを用意しました。これを元に解説します。

列制御を加えたサンプルページ

導入手順

まずはColVisを用意しよう。エクステンションとして本家サイトに用意されている。

公式URL：http://datatables.net/index

ダウンロードURL：https://datatables.net/download/index

エクステンション選択
ExtensionsのButtonsを選択する
ColVisを加える
column visibilityを選択すれば必要な機能が入ったファイルをダウンロード出来る
CDNかファイルを選択
CDNかファイルか好みで選ぼう。自動的にPackageの記述を生成してくれる

 

生成されたコードを元にHTMLに記述すれば準備は出来る。

導入方法が分からない人はjQueryのDataTablesでリッチなテーブルを使おうを参照。

ColVisを有効にする

赤字部分がColVisを適用する設定。ここではカラム切替という名前で生成する。

 <script type="text/javascript">
 $(document).ready(function() {
  $('#datatable1').DataTable({
   paging:true
   ,order:[3, 'desc']
   ,scrollX: true
   ,searching:true
   ,bSort:true
   ,bStateSave:true
   ,bInfo:true
   ,bAutoWidth:false
   ,dom: 'B<"clear">lfrtip'
   ,buttons: [
    {
     extend: 'colvis',
     text: 'カラム切替'
    }
   ]
   // 件数切替の値を10～50の10刻みにする
   ,lengthMenu: [ 10, 20, 30, 50, 100]
   // 件数のデフォルトの値を50にする
   ,displayLength: 20
   ,oLanguage: {
    sLengthMenu: "表示行数 _MENU_ 件"
    ,oPaginate: {
     sNext: "次のページ",
     sPrevious: "前のページ"
    }
    ,sInfo: "全_TOTAL_件中 _START_件から_END_件を表示"
    ,sSearch: "検索："
   }
  });
 } );
 </script>

DataTablesのオプション

ざっくりと一般的なものを紹介する。詳しくは公式ページをご覧下さい。
オプション
デフォルト値
説明
bAutoWidth
 TRUE
 列の幅の自動調整をするかどうか
bFilter
 TRUE
 フィルタリング機能の有無
bInfo
 TRUE
 レコード情報表示の有効/無効。現在のページやレコード総数を表示。
bLengthChange
 TRUE
 表示件数を指定するドロップダウンメニュー表示の有無
bPaginate
 TRUE
 ページングの有効/無効。
bProcessing
 FALSE
 処理中表示の有無。
bSort
 TRUE
 カラムのソートの有効/無効
bStateSave
 FALSE
 cookieでテーブル表示の状態維持
order
 [[0, 'asc']]
 初期状態のソート順を指定
lengthMenu
 [ 10, 25, 50, 100 ]
 表示件数のドロップダウンメニューに表示するメニューを指定
displayLength
 10
 ページングをしている際のデフォルトの表示件数
oLanguage
 -
 表示制御要素の文字列を指定。日本語化したいならばここで値を指定すること。
dom
 lfrtip
 表示制御要素の表示制御。lは表示件数の制御、fはフィルタリングの表示など。文字でそれぞれの表示制御の並びを指定する。
buttons
 -
 Extensionの追加指定と表示名の指定
お疲れ様でした。

jQuery入門道場
jQuery入門道場

posted with amazlet at 18.07.21
株式会社フェンドーラ (2014-01-19)
売り上げランキング: 1,757
Amazon.co.jpで詳細を見る
]]> https://a2d.webcraft.work/datatables_column/feed/ 0 jQueryのDataTablesでリッチなテーブルを使おう https://a2d.webcraft.work/datatables_intro/ https://a2d.webcraft.work/datatables_intro/#comments Tue, 26 Jul 2016 12:10:43 +0000 http://a2d.webcraft.work/?p=841 表データを掲載する際にはやはりテーブル要素を使うのが一番適していますね。

昔からソートが出来るテーブル表はありましたがjavascriptで動作させる必要がありました。しかし今はjQueryのプラグインを使うことで簡単に導入する事ができます。

それが「DataTables」です。

dataTablesを使ったテーブル
ソートやフィルタが可能

jQueryプラグインDataTables

HTML テーブルをデータグリッド出来るようにするjQuery のプラグイン。

ソート機能や検索機能を加える

公式URL：http://datatables.net/index

基本導入例

ここでは基本的な動作のみの導入手順を記載していく。

導入サンプル

必要なファイルを読み込ませる

まずはstylesheetとscriptを読み込ませよう。

<head>
 …
<!--stylesheet-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css"/>
<!--jQuery-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!--Datatables-->
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
 …
</head>

テーブルデータを作成

テーブルデータを作成。idは「sample_tabledata」とする

<table id="sample_tabledata">
 <thead>
  <tr>
   <th>No.</th>
   <th>name</th>
   <th>pw</th>
   <th>gd</th>
   <th>sp</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>101</td>
   <td>10613</td>
   <td>12982</td>
   <td>15143</td>
  </tr>
  <tr>
   <th>2</th>
   <td>102</td>
   <td>11074</td>
   <td>12007</td>
   <td>15607</td>
  </tr>
 </tbody>
</table>

手順3

ヘッドタグの下(datatables.min.jsより下)にDataTablesを動かす記述を加える。

<head>
 … 
 <script>
 $(function(){
   $("#sample_tabledata").dataTable();
 })
 </script>
</head>

以上。これで基本的な動作は問題無い。導入サンプルは非常にシンプルに上の手順で導入したものなので、上手く行かない場合には良く見比べてみよう。

次回以降はオプションの紹介やcolvisを使った列表示の制御方法をまとめる予定

]]> https://a2d.webcraft.work/datatables_intro/feed/ 1 Retinaディスプレイについて https://a2d.webcraft.work/retina_taiou/ https://a2d.webcraft.work/retina_taiou/#respond Fri, 20 Nov 2015 06:36:43 +0000 http://a2d.webcraft.work/?p=42 ホームページを作っていると良くRetinaディスプレイに悩まされることがあります。Retinaは綺麗なんですが、対応したコンテンツでないと反対に汚くなってしまうんですよね～；

Retina対応と言うと通常の画像をRetinaディスプレイで見ると画像がぼけたりすることについて対応するために、掲載するスペースの2倍や3倍の画像を用意するといった手法がとられます。縦横それぞれ2倍で作って半分のサイズで指定するって形ですね。

これで対応出来ない問題が発生したのです。

どんな問題が発生したのか

今回悩んだのは1pxの線を背景画像に使ったRetina対応です。(正確に言うとdpiが高いディスプレイで発生する為、所謂Retinaの定義に合わなくても発生するのですが)

今回、背景画像に1pxの破線を使ったのですが、FireFoxとIE、iPhoneにおいて一部の破線が見かけ太くなる問題が発生したのです。スクロールやズームをすると太くなる破線が変わる状況・・・(どうしたものか)

すぐにディスプレイの問題だろうから、Retina対応をすれば治るだろうと、ここまではピンときたのです。

しかし結局、上記のRetina対応に倣って、2倍にしたり3倍にしたりしてみたのですが無駄でした。

じゃあどうやって解決したか

解決方法は単純でした。1px*7pxで作った破線を2px(黒と透過を1pxずつ)*14pxで作り直し、CSSに下記のようにyを等倍、xを1/2で記載しました。

background-size: 7px 2px;

するとFireFoxもIEもiPhoneで見ても嘘のように綺麗になりました！

困っている人は試して見ると良いでしょう。

しかし根本的な解決ではないので、更に細かなディスプレイが出てきた時にはまた発生する恐れがあります・・・。

SVGなどで対応するのが一番なんでしょうね。とはいえ、要件で使えないのであればこういう工夫をせざるを得ないのです・・・くっ！

 

]]> https://a2d.webcraft.work/retina_taiou/feed/ 0