1. ホーム
  2. js

jquery Datatable パラメータとその使用方法

2022-02-12 22:18:08
 var listTable;
      $(function () {
          listTable = $("#OrderList").dataTable({
              "bSort": false,
              "bServerSide": true,
              "sAjaxSource": "/Contract/GetOrderManagement",
              "bProcessing": true,
              "fnServerParams": function (aoData) {
                  aoData.push({
                      name: "OrderNumber",
                      value: $("#OrderNumber").val()
                  },
                  {
                      name: "ContractNumbr",
                      value: $("#ContractNumbr").val()
                  },
                  {
                      name: "OrderStart",
                      value: $("#OrderStart").val()
                  },
                  {
                      name: "OrderEnd",
                      value: $("#OrderEnd").val()
                  },
                  {
                      name: "SaleName",
                      value: ($("#SaleName").val())
                  },
                  {
                      name: "OrderStatus",
                      value: ($("#OrderStatus").val())
                  },
                  {
                      name: "CustomerName",
                      value: ($("#CustomerName").val())
                  },
                  {
                      name: "OrderType",
                      value: ($("#OrderType").val())
                  }
                  );
              }

          })
      });

      function Search() {
          var oSettings = listTable.fnSettings();
          oSettings._iDisplayStart = 0;
          listTable.fnDraw(oSettings);
      }    





dataTableバインディング処理を行う際に付けることができるパラメータは以下の通りです。
<テーブル 属性名 値の範囲 説明 bAutoWidth trueまたはfalse、デフォルトはtrue テーブルの各列の幅を自動的に計算するかどうか bDeferRender true または false、デフォルトは false レンダリングのためのパラメータ bFilter true または false、デフォルトは true クライアントサイドフィルタリングの有効・無効を切り替えるスイッチです。 bInfo true または false、デフォルトは true フォームに関する情報を表示するかしないかを切り替えます。 bJQueryUI true または false、デフォルトは false jquery ui themeroller スタイルを使用するかどうか bLengthChange true または false、デフォルトは true 各ページの長さの選択バーの表示/非表示を切り替える(ページャーのサポートが必要です) bPaginate true または false、デフォルトは true ページャーを表示(使用)するかしないかを切り替えます。 b処理 trueまたはfalse、デフォルトはfalse データ処理中に"processing"メッセージを表示するかどうかを指定するためのスイッチ bScrollInfinite true または false、デフォルトは false スイッチで、無限にスクロールするかどうかを指定します(sScrollYと組み合わせて使用)。これは、大きなデータ量がある場合に有効です。このフラグがtrueの場合、ページャーはデフォルトでオフになる bSort true または false、デフォルトは true カラム単位でソート可能にするかどうかを切り替える bSortClasses trueまたはfalse、デフォルトはtrue 現在のカラムがソートされているときにクラス 'sorting_1', 'sorting_2', 'sorting_3' を追加するかどうかを指定するスイッチで、オンにすると大きなデータを扱うときにパフォーマンスが低下する。 bStateSave true または false、デフォルトは false クライアントサイドのステータスロギング機能をオンにするかどうかを切り替えます。このデータはクッキーに記録され、この記録をオンにすると、ページを一度更新しても、ブラウザを再度開いても、以前の状態が保存されます sScrollX disabled' または '100%' に類似した文字列 水平スクロールをオンにし、スクロール領域の大きさを指定するかどうか sScrollY disabled' または '200px' に類似する文字列 縦スクロールをオンにして、スクロール領域の大きさを指定するかどうか -- -- -- オプション aaソート array array[int,string], as [], [[0,'asc'], [0,'desc'] ]である。 複数列のデータでソートする際の基準を指定します。 aaSortingFixed 同上 上記と同じです。唯一の違いは、ユーザーのカスタム設定と競合できないことです aLengthMenu デフォルトは [10, 25, 50, 100]、1次元配列または2次元配列、例えば [[10, 25, 50, -1], [10, 25, 50, "All"]] を指定可能。 これは、1ページあたりのエントリ数を選択するものである。2次元配列を使用する場合、2次元レベルの要素は2つしか存在できず、1つ目はページごとのエントリ数を表示するオプション、2つ目はそれらのオプションの説明となります aoSearchCols デフォルトのnull、に似ている。[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex& quot: false} ]であることを意味します。 各カラムに、初期化された検索リストの特性を個別に定義する(この部分がまだ欠けている) asStripClasses デフォルト ['odd', 'even'], 例: ['strip1', 'strip2', 'strip3'] [ストライプ1, 'ストライプ2, 'ストライプ3']。 各行に適用されるクラススタイルを指定し、自動的にループさせる bDestroy true または false、デフォルトは false 新しいdataTableバインディングが同じ要素で実行されるとき、前のデータオブジェクトをクリアして新しいものに置き換えるために使用されます。 bリトリーブ true または false、デフォルトは false dataTableバインディングを行った際にDataTableオブジェクトが返されるかどうかを示す bScrollCollapse true または false、デフォルトは false スクロールビューをスクランブルする適切な時間を指定する bSortCellsTop true または false、デフォルトは false (不明なもの) iCookieDuration 整数、デフォルト7200、単位は秒 クライアント情報をクッキーに保存する期間を指定し、その期間を過ぎると自動的に失効します。 iDeferLoading 整数値、デフォルトはnull 遅延ロード。ロードするエントリの数を引数として取り、通常 bServerSide, sAjaxSource などで使用されます。 iDisplayLength 整数値、デフォルトは10 ページャーを有効にした状態で、1画面に表示する項目数を指定する。 iDisplayStart 整数値、デフォルトは0 表に表示を開始するデータの断片を指定するために使用します。 iScrollLoadGap 整数値、デフォルトは100 DataTableのスクロール設定時に、1画面に表示できる最大データ数を指定するために使用します。 oSearch default{ "sSearch": "", "bRegex": false, "bSmart": true }. ここでも、初回に関連する検索パラメータの指定がややこしく、今のところ取得できていない sAjaxDataProp 文字列、デフォルトは 'aaData' です。 サーバーからフォームデータを取得する際に、データ項目に使用される名前を指定します sAjaxSource URL文字列、デフォルトはNULL どのURLからデータを取得するかを指定する sCookiePrefix 文字列、デフォルトは 'SpryMedia_DataTables_' です。 状態保存機能をオンにした場合に、クッキーに保存される文字列を指定するためのプレフィックス名 sDom デフォルトのlfrtip(bJQueryUIがfalseの場合)または <"H"lfr>t<"F"ip> (bJQueryUIがtrueの場合) これはDataTableのレイアウトを定義するために使われる強力なプロパティなので、別のドキュメントに追加しておきましょう sPaginationType full_numbers' または 'two_button', デフォルトは 'two_button' です。 ページャースタイル指定用 sScrollXInner 文字列のデフォルト 'disabled' もうひとつの水平スクロールに関するもの。
DataTableは、以下のコールバック関数をサポートしています。
<テーブル コールバック関数名 パラメータ 戻り値 デフォルト 機能 fnCookieCallback 1.文字列 DataTablesで定義されたCookieの名前 2.object: クッキーに格納されるデータ 3.string: クッキーの有効期限文字列 4.string: 設定するCookieのパス string: クッキーフォーマット文字列 (encodeURIComponent()を使用してエンコードされる必要があります) ヌル この関数呼び出しは、Cookieが変更されるたびに起動されます fnDrawCallback なし なし なし 各テーブルが描画された後に呼び出されるので、好きなようにできる fnFooterCallback 1.node : フッタ用 "TR" 要素 2.array 配列文字列: 3.int : 表示配列における現在の表示開始位置のインデックス< 4.int : 表示配列における現在の表示終了位置のインデックス 5.array int : 視覚的位置をフルデータ配列に変換するインデックス配列 なし なし 再描画のたびにテーブルのフッターを修正するために使用される fnFormatNumber 1.int : フォーマットされる数値 文字列 : データテーブルで数値を表示するためにフォーマットされた文字列 デフォルトがあります で区切られた大きな数字に、いくつかのカンマを自動的に追加するために使用されます。 fnHeaderCallback 1.node : ヘッダー用 "TR" 要素 2.array 配列文字列: 3.int : 表示配列における現在の表示開始位置のインデックス 4.int : 表示配列における現在の表示終了位置のインデックス 5.array int : 視点位置をフルデータ配列に変換するインデックス配列 なし なし 描画が発生するたびにテーブルのヘッダーを修正するために使用される fnInfoCallback 1.object: DataTablesの設定オブジェクト 2.int: 抽選データ中の開始位置 3.int: 抽選データ中の終了位置 4.int: 総行数 int: テーブル内の総行数(フィルタリングに関係なく) 5.int: フィルタリング後のデータセット内の総行数 6.string: データセット内の総行数(フィルタリングに関係なく) 5.int: データセット内の総行数(フィルタリングに関係なく) 6.string: テーブル内の総行数 4.int: 総行数(フィルタリングに関係なく) 7.int: テーブル内の行数 DataTablesが独自のルールでフォーマットした文字列 文字列を指定します。information要素に表示される文字列。 なし テーブル情報を伝達するために使用される fnInitComplete 1.object:oSettings - DataTables設定オブジェクト なし なし フォームの初期化が完了した後に呼び出される fnPreDrawCallback 1.object:oSettings - DataTables設定オブジェクト ブーリアン なし 描画を開始する前に呼び出され、false を返すと draw イベントが発生しないようにする。 fnRowCallback 1.node : 現在の行の "TR" 要素 2.array 文字列 : この行の生のデータ配列 (元のHTMLから派生) 3.int : 現在のテーブルの描画の表示インデックス 4.int : 行の全リストにおけるデータのインデックス (フィルタリング後) node : 現在の行のための"TR"要素 なし 線が作成され、まだ画面に描画されていないときに呼び出され、通常、線のクラススタイルを変更するために使用される fnServerData 1.文字列 データを取得するHTTPソース(例:sAjaxSource) 2.配列オブジェクト。サーバーに送信するデータを含むキーと値のペアのオブジェクト 3. Function: データ取得処理完了時に呼び出される、ページ上にデータを描画する関数。 ボイド $.getJSON サーバーに送信されるデフォルトのリクエストアクションを置き換えるために使用されます。 fnStateLoadCallback 1.object:oSettings - DataTables設定オブジェクト 2.object:oData - 状態保存Cookieから取得した、復元すべき情報を含むオブジェクト。正確なプロパティは、DataTablesのコードを参照してください。 ブール値 - 状態を読み込まない場合は false、そうでない場合は true。 なし Cookieのデータが読み込まれる前に実行されるため、このデータを簡単に変更することができる fnStateSaveCallback 1.object:oSettings - DataTables設定オブジェクト 2.String:sValue - 状態保存クッキーに保存されるべきJSON文字列(最後の閉じ中括弧なし)。 String - 状態を保存するために使用される完全な文字列です。 なし 状態データがクッキーに保存される前に実行され、何らかの事前操作を行うのに便利です http://www.cnblogs.com/nier/archive/2012/03/18/2404836.html から取得