Works

トップページ

トップページ

  • 1544
  • 0

N'sメニュー

  • 1179
  • 0

dataTablesノーマル サンプル

# [dataTables](https://datatables.net/)ノーマルサンプル jQuery dataTables プラグインのノーマルサンプル dataTables は全てデータをロードして操作を行う。 なので 1000件ぐらいなら使用に耐えうる。(クライアントマシンの性能にもよる。) データが大量の場合は、別の方法でページングを実装する必要がある。 ## メッセージの日本語化 ``` $(function() {  $('#table_id').dataTable({   "oLanguage": {    "sLengthMenu": "表示行数 _MENU_ 件",    "oPaginate": {     "sNext": "次へ",     "sPrevious": "前へ"    },    "sInfo": "全_TOTAL_件中 _START_件から_END_件を表示",    "sSearch": "検索:",    "sInfoFiltered": "(全_MAX_件から絞り込み)",    "sZeroRecords": "一致するレコードがありません。",    "sInfoEmpty": "0件中0件を表示しています。"   }  }); }); ``` [DataTables - Language](http://datatables.net/usage/i18n) ## DOM の位置変更 DOMの位置を上とか下とかに変更したい場合は以下の方法を使う。 横方向は css などを使うのかな? * l - 表示件数 * f - フィルタ入力 * t - テーブル * i - インフォメーション * p - ページング * r - 処理 * < と > - div 要素 * <"クラス" と > - クラスを持つ div * 例: <"wrapper"flipt>, ip> ``` $(document).ready(function() {  $('#table_id').dataTable( {   "sDom": '<"top"i>rt<"bottom"flp><"clear">'  } ); } ); ``` 上の設定では、インフォメーションが上、処理とテーブルが中、フィルタと表示件数とページングが下。 [DataTables DOM positioning example](http://datatables.net/examples/basic_init/dom.html) ## 特定の列を検索対象から除外する 特定の列は検索の対象から外したい場合がある。 どうすれば良いか調べたので記載しておく。 以下の例では月だけが検索対象になる。 ``` $(document).ready(function() {  $('#table_id').dataTable( {   "aoColumns": [    {"bSearchable": true }, // 月    {"bSearchable": false}, // 和名    {"bSearchable": false}, // よみ    {"bSearchable": false}, // 英名   ]  } ); } ); ``` [戻る](http://jsdo.it/nekyo/8Mwm)

  • 12558
  • 1

CSSアイコン一覧

## CSSアイコン一覧 + Font-Awesome + bootstrap css + jQuery Mobile icon + genericon + jsdo.it Webフォント font-awesome のアイコン一覧 http://nekyo.s601.xrea.com/nc/index.php?key=jopl1bpzs-8#_8 ※ Webフォントが反映されない場合も上のリンク先参照 どうやら、Font-Awesomeとかbootstrap は jsdo.it から FireFox でも参照可能。 jsrun.it から jsdo.it のクロスドメイン許可がされていないようで、 jsdo.it のアイコンは FF だと表示できない。意外(^_^; 2014/5/15 font-awesome 4.1.0 に対応

  • 6625
  • 2

Skills

Hot tags

Categories

HTML / CSS / JavaScript