datatable パラメータとサーバーサイド ajax 関数の設定と指示

先週は、データテーブルを使用する必要があるため、しかし、オンライン検索は、パラメータへの少しの導入、またはいくつかのコールバック関数の導入、非常にいくつかのより包括的なを持っているので、彼らが使用するものの概要は、実際には、サーバー側のページングを伴うデータテーブルは、私たちに統合されている、それはさらに、以下を使用することは非常に便利です。

datatableの使い方の詳細はこちら。

1. パラメータの基本設定

<テーブル dataTableで処理されるテーブルオブジェクトはheadとtbodyを持つ必要があり、正しく処理されるためには構造が規則的でなければならない（データが完全である必要はない）ことに注意してください。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' もうひとつの水平スクロールに関するもの。

<テーブル サーバー側では、パラメータを要求することで、現在の操作に関する情報を得ることができる。[つまり、このリストにあるプロパティの値は、サーバー側のメソッドで利用できるのです！] 。これらは、次の例の aodata で利用可能です。

<テーブル タイプ 名称 説明 int iDisplayStart 表示開始インデックス int iDisplayLength 表示される行数 int iColumns 表示する列の数 文字列 sSearch グローバル検索フィールド ブーリアン bEscapeRegex 規則性のあるグローバルな検索 ブーリアン bSortable_(int) クライアント側でフラグビットによりカラムがソート可能かどうかを示す ブーリアン bSearchable_(int) クライアント側でカラムに検索可能のフラグが立っているかどうかを示す 文字列 sSearch_(int) 個別列検索 ブーリアン bEscapeRegex_(int) 個々の列に対して通常検索を使用するかどうか int iSortingCols ソートする列の数 int iSortCol_(int) ソートされる列 文字列 sSortDir_(int) ソートの方向 "desc" または "asc" を指定します。 文字列 sEcho DataTablesが生成するために使用する情報

<テーブル サーバーから返されるデータの形式は次のとおりです。 タイプ 名称 説明 int iTotalRecords 実際の行数 int iTotalDisplayRecords フィルタリング後の実際の行数です。 文字列 sEcho のクライアント側 sEcho の変更されていないレプリカ。 文字列 sColumns オプションで、カンマで区切られたカラム名を指定します。 配列混合 aaData 配列の配列、テーブルの実際のデータ。

<テーブル コールバック関数名 パラメータ 戻り値 デフォルト 機能 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: 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: データ取得処理完了時に呼び出される、ページ上にデータを描画する関数。 ボイド $.getJSON サーバーに送信されるデフォルトのリクエストアクションを置き換えるために使用されます。 fnStateLoadCallback 1.object:oSettings - DataTables設定オブジェクト 2.object:oData - 状態保存Cookieから取得した、復元すべき情報を含むオブジェクト。正確なプロパティは、DataTablesのコードを参照してください。 ブール値 - 状態を読み込まない場合は false、そうでない場合は true。 なし Cookieのデータが読み込まれる前に実行されるため、このデータを簡単に変更することができる fnStateSaveCallback 1.object:oSettings - DataTables設定オブジェクト 2.String:sValue - 状態保存クッキーに保存されるべきJSON文字列(最後の閉じ中括弧なし)。 String - 状態を保存するために使用されるべき完全な文字列です。 なし 状態データがクッキーに保存される前に実行され、何らかの事前操作を行うのに便利です

サーバーサイドのページネーションについては、例も挙げて説明します。

$("#" + tableId).dataTable({
    "aLengthMenu": [10,15,20], //change the option to display the number of records
"bAutoWidth": true, //Whether to adapt the width
"bFilter": false,
"columns": [
{
"data": "id",
"sDefaultContent": "", //the default value of this column is "", in case there is no such value in the data, DataTables will report an error when loading the data
"bVisible": false //This column is not displayed
},
{
"data": "CallCount",
"sTitle": "Number of visits",
"sClass": "left"
},
{
"data": "update",
"sTitle": "edit",
"sClass": "left"
}
],
"oLanguage": { //Internationalization configuration
"sProcessing": "Fetching data, please wait... ",
"sLengthMenu": "Displaying _MENU_ article",
"sZeroRecords": "No content you are searching for",
"sInfo": "Total records from _START_ to _END_ is _TOTAL_ records",
"sInfoEmpty": "Number of records is 0",
"sInfoFiltered": "(All records _TOTAL_ entries)",
"sInfoPostFix": "",
"sSearch": "Search",
"sUrl": "",
"oPaginate": {
"sFirst": "first page",
"sPrevious": "Previous",
"sNext": "Next",
"sLast": "Last"
}
},
//fnInitComplete: When the datatable is initialized, I show the search for the date I added myself, as well as the review button, with the main purpose of user experience optimization
"fnInitComplete": function () {
$('#time_select').css("display", "inline-block");
$('#audit_pass').css("display", "inline-block");
},
"bProcessing": false, //whether to show loading
"sAjaxSource": '/admin/Developer/getDeveloperData', // request resource path
"serverSide": true, //enable server processing mode
"fnDrawCallback":function(){
//modify the event
$('.update-span').click(function () {
var oTable = $('#'+tableId).dataTable();
var b = oTable.fnGetData($(this).parent().parent());
$('#son_form').css('display', 'block');
addFormData(b);
});
},
"fnServerParams": function (aoData) {
aoData.push({ "name": "status", "value": $('#audit').val() });
aoData.push({ "name": "beginTime", "value": $('#start_date').val() });
aoData.push({ "name": "endTime", "value": $('#end_date').val() });
},
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
'type': 'post',
"url": sSource,
"dataType": "json",
"data": { 'aoData': JSON.stringify(aoData) },//"aodata": JSON.stringify(aoData)
"success": function (resp) {
var msgJson = new Object();
msgJson = packagingdatatabledata(resp);
var msgString = JSON.stringify(msgJson);
var a = eval('(' + msgString + ')');
fnCallback(a);
}
});
}
});

そして、私自身のイベント リクエストで、datatable のメソッドを直接呼び出して、ページの再描画を完了させることができます。

$.ajax({
type: 'post',//optional get
url: '/admin/Developer/checkData',
data: { 'user_Id': JSON.stringify(a) },
dataType: 'json',//The data type returned by the server can be XML ,Json jsonp script htmltext etc.
success: function (msg) {
$('#' + tableId).dataTable().fnDraw();
},
error: function () {
}
});

datatable()の出力の後に、次のようなものが表示されます。