dataTablesノーマル サンプル

nekyo

License: MIT License

Fork
3
Fav
1
View
13058
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 0 lines
  • HTML 54 lines
  • CSS 7 lines

dataTablesノーマルサンプル

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

DOM の位置変更

DOMの位置を上とか下とかに変更したい場合は以下の方法を使う。
横方向は css などを使うのかな?

  • l - 表示件数
  • f - フィルタ入力
  • t - テーブル
  • i - インフォメーション
  • p - ページング
  • r - 処理
  • < と > - div 要素
  • <"クラス" と > - クラスを持つ div
  • 例: <"wrapper"flipt>, <lf<t>ip>

$(document).ready(function() {
 $('#table_id').dataTable( {
  "sDom": '<"top"i>rt<"bottom"flp><"clear">'
 } );
} );

上の設定では、インフォメーションが上、処理とテーブルが中、フィルタと表示件数とページングが下。
DataTables DOM positioning example

特定の列を検索対象から除外する

特定の列は検索の対象から外したい場合がある。
どうすれば良いか調べたので記載しておく。
以下の例では月だけが検索対象になる。

$(document).ready(function() {
 $('#table_id').dataTable( {
  "aoColumns": [
   {"bSearchable": true }, // 月
   {"bSearchable": false}, // 和名
   {"bSearchable": false}, // よみ
   {"bSearchable": false}, // 英名
  ]
 } );
} );

戻る

  • dataTablesノーマル サンプル
  • dataTablesノーマル サンプル

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

nekyo

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by