jQueryのDataTableでのパラメータの詳細とcolumnsのプロパティの説明
8810 ワード
datatablesパラメータの詳細:
method:'get',//リクエスト方式(*) toolbar:'#toolbar',//ツールボタンどの容器で striped:true,//行間隔を表示するかどうか cache:false,//キャッシュを使用するかどうかはデフォルトtrueなので、一般的にこのプロパティ(*) を設定する必要があります.
pagination:true,//ページング(*)を表示するかどうか sortable:false,//ソートを有効にするかどうか sortOrder:「asc」//ソート方式 queryParams: oTableInit.queryParams,//伝達パラメータ(*) SidePagination:「client」//ページング方式:clientクライアントページング、serverサービス側ページング(*) pageNumber:1,//初期化ロード第1ページ、デフォルト第1ページ PageSize:10,//1ページあたりのレコード行数(*) pageList:[10,25,50,100],//選択可能なページ当たりの行数(*) search:true,//表検索を表示するかどうか、この検索はクライアント検索であり、サービス側には入らないので、個人的には意味がないと感じます. strictSearch: true,
showColumns:true,//すべての列を表示するかどうか showRefresh:true,//リフレッシュボタンを表示するかどうか minimumCountColumns:2,//最小許容列数 clickToSelect:true,//クリック選択行 を有効にするかどうか
height:500,//行の高さ、heightプロパティが設定されていない場合、表は自動的にレコードの数に基づいて表の高さを感じます. uniqueId:「ID」//各行の一意の識別子、一般にプライマリ・キー列 showToggle:true,//詳細ビューとリストビューの切り替えボタンを表示するかどうか cardView:false,//詳細ビューを表示するかどうか detailView:false,//親子テーブルを表示するかどうか
Columnsの説明
DOMによってDataTable要素の情報を直接取得できますが、DataTableはカラムのプロパティをカスタマイズするより便利な方法を提供します.次に、DataTableがカラムのプロパティを定義する方法について説明します.
DataTableでは、カラムのプロパティを定義する2つのパラメータが用意されています.columnsとcolumnDefs(ソースコード:aoColumnsとaoColumnDefs)ユーザー定義のパラメータが分かりやすいように、DataTableが提供するユーザーパラメータ名とソースコードのパラメータ名は異なりますが、どちらを使用しても最終的な効果は同じです.(＊以下のパラメータ説明はいずれもユーザ使用パラメータ名)columnsとcolumnDefsの違い:
同じ点:同じ効果異なる点:異なる機能(定義された各オブジェクト(columnDefs.targetsDT)でターゲット属性を使用する必要がある)columns:特定のカラムの初期化プロパティを設定し、配列を定義して複数のカラムを設定することができます.配列の長さはテーブルの数に等しくなければなりません.デフォルト値を使用して「NULL」に設定するだけで、配列の各要素は単一のカラムのプロパティしか設定できません.
columnDefs:columnsとよく似ています.この配列は、特定のカラム、複数のカラム、またはすべてのカラムに対して定義できます.配列は任意の長さにできます.targetsパラメータで列または複数の列を設定します.この属性定義は次のようになります.
0または正の整数-左のカラムインデックスからのカウント負の整数-列インデックス右から文字列-クラス名が一致するTHは、カラムです.
文字列"_all"-すべての列(つまりデフォルト値を指定)
2つのパラメータは同時に使用できますが、columns定義の優先度が最も高いです.
columnDefsで同じ列に対して複数の定義がある場合、最初の定義の優先度が最も高い.
パラメータの詳細:
ユーザパラメータ名
ソースパラメータ名
英語の解釈
中国語の説明
cellType
sCellType
Cell type to be created for a column
列ラベルのタイプを設定(ex:th,td)
className
sClass
Class to assign to each cell in the column
列のclassプロパティ値の設定
contentPadding
sContentPadding
Add padding to the text content used when calculating the optimal with for a table.
表の計算と最適化に使用するテキストの内容を設定します.一般的には設定する必要はありません.
createdCell
fnCreatedCell
Cell created callback to allow DOM manipulation
cell作成後のコールバック関数を設定し、背景色を設定したり、行を追加したりします.
data
mData
Set the data source for the column from the rows data object/array
セル内の値の設定
defaultContent
sDefaultContent
Set default, static, content for a column
列のデフォルト設定
name
sName
Set a descriptive name for a column
列の記述名の設定
orderable
bSortable
Enable or disable ordering on this column
列をソートできるかどうかを設定
orderData
aDataSort
Define multiple column ordering as the default order for a column
複数の列を並べ替えるときの列のデフォルトの順序を設定します.
orderDataType
sSortDataType
Live DOM sorting type assignment
orderSequence
asSorting
Order direction application sequence
列のデフォルトの並べ替えを設定し、列の並べ替えの順序を変更できます.
render
mRender
Render (process) the data for use in the table
searchable
bSearchable
Enable or disable filtering on the data in this column
列のデータをフィルタするかどうかを設定
title
sTitle
Set the column title
列のタイトルの設定
type
sType
Set the column type - used for filtering and sorting string processing.Four types (string, numeric, date and html (which will strip HTML tags before ordering)) are currently available.
列のタイプを設定し、フィルタおよびソートの文字列処理に使用します.
visible
bVisible
Enable or disable the display of this column
列を表示するかどうかを設定
width
sWidth
Column width assignment
列の幅の定義
参考資料:http://datatables.net/reference/option/
このページの抜粋https://blog.csdn.net/u013380777/article/details/52067483ありがとうございます
method:'get',//リクエスト方式(*)
pagination:true,//ページング(*)を表示するかどうか
showColumns:true,//すべての列を表示するかどうか
height:500,//行の高さ、heightプロパティが設定されていない場合、表は自動的にレコードの数に基づいて表の高さを感じます.
Columnsの説明
DOMによってDataTable要素の情報を直接取得できますが、DataTableはカラムのプロパティをカスタマイズするより便利な方法を提供します.次に、DataTableがカラムのプロパティを定義する方法について説明します.
DataTableでは、カラムのプロパティを定義する2つのパラメータが用意されています.columnsとcolumnDefs(ソースコード:aoColumnsとaoColumnDefs)ユーザー定義のパラメータが分かりやすいように、DataTableが提供するユーザーパラメータ名とソースコードのパラメータ名は異なりますが、どちらを使用しても最終的な効果は同じです.(＊以下のパラメータ説明はいずれもユーザ使用パラメータ名)columnsとcolumnDefsの違い:
同じ点:同じ効果異なる点:異なる機能(定義された各オブジェクト(columnDefs.targetsDT)でターゲット属性を使用する必要がある)columns:特定のカラムの初期化プロパティを設定し、配列を定義して複数のカラムを設定することができます.配列の長さはテーブルの数に等しくなければなりません.デフォルト値を使用して「NULL」に設定するだけで、配列の各要素は単一のカラムのプロパティしか設定できません.
columnDefs:columnsとよく似ています.この配列は、特定のカラム、複数のカラム、またはすべてのカラムに対して定義できます.配列は任意の長さにできます.targetsパラメータで列または複数の列を設定します.この属性定義は次のようになります.
0または正の整数-左のカラムインデックスからのカウント負の整数-列インデックス右から文字列-クラス名が一致するTHは、カラムです.
文字列"_all"-すべての列(つまりデフォルト値を指定)
2つのパラメータは同時に使用できますが、columns定義の優先度が最も高いです.
columnDefsで同じ列に対して複数の定義がある場合、最初の定義の優先度が最も高い.
example：
Js
$('#example').dataTable(
{
data: [
{
"name": "Tiger Nixon1",
"position": "System Architect1",
"phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },
"salary": "$3,1201",
"start_date": "2011/04/25",
"office": "Edinburgh1",
"extn": "54211"
},
{
"name": "Tiger Nixon2",
"position": "System Architect2",
"phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },
"salary": "$3,1202",
"start_date": "2011/04/25",
"office": "Edinburgh2",
"extn": "54212"
},
{
"name": "Tiger Nixon3",
"position": "System Architect3",
"phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },
"salary": "$3,1203",
"start_date": "2011/04/25",
"office": "Edinburgh3",
"extn": "54213"
}
],
columnDefs: [
{
"targets": 0,
"searchable": false
},
{
"targets": [1,2,3],
"orderData": [ 2, 3, 4 ],
"searchable": false
},
{
"targets": [-3,-4],
"orderable": false,
"searchable": false
}
],
columns: [
{ "name": "name",
"cellType": "th",
"orderDataType": "dom-text",
"orderSequence": [ "desc","asc", "asc" ],
"className": "my_class",
"contentPadding": "mmm",
"createdCell": function (td, cellData, rowData, row, col) {
if ( row < 1 ) {
$(td).css('color', 'red');
}
},
"data": "name",
"searchable": true,
"title": "My Name"
},
{
"data": "position",
"render": function ( data, type, full, meta ) {
return '' + data + '';
}
},
{
"data": 'phone',
"render": {
"_": "plain",
"filter": "filter",
"display": "display"
}
},
{ "data": "office" },
{ "data": "start_date", "type": "date" },
{ "data": "extn", "visible": false},
{ "data": "salary", "width": "20px" },
{
"data": null,
"orderable": false,
"defaultContent": ""
}
]
}
); パラメータの詳細:
ユーザパラメータ名
ソースパラメータ名
英語の解釈
中国語の説明
cellType
sCellType
Cell type to be created for a column
列ラベルのタイプを設定(ex:th,td)
className
sClass
Class to assign to each cell in the column
列のclassプロパティ値の設定
contentPadding
sContentPadding
Add padding to the text content used when calculating the optimal with for a table.
表の計算と最適化に使用するテキストの内容を設定します.一般的には設定する必要はありません.
createdCell
fnCreatedCell
Cell created callback to allow DOM manipulation
cell作成後のコールバック関数を設定し、背景色を設定したり、行を追加したりします.
data
mData
Set the data source for the column from the rows data object/array
セル内の値の設定
defaultContent
sDefaultContent
Set default, static, content for a column
列のデフォルト設定
name
sName
Set a descriptive name for a column
列の記述名の設定
orderable
bSortable
Enable or disable ordering on this column
列をソートできるかどうかを設定
orderData
aDataSort
Define multiple column ordering as the default order for a column
複数の列を並べ替えるときの列のデフォルトの順序を設定します.
orderDataType
sSortDataType
Live DOM sorting type assignment
orderSequence
asSorting
Order direction application sequence
列のデフォルトの並べ替えを設定し、列の並べ替えの順序を変更できます.
render
mRender
Render (process) the data for use in the table
searchable
bSearchable
Enable or disable filtering on the data in this column
列のデータをフィルタするかどうかを設定
title
sTitle
Set the column title
列のタイトルの設定
type
sType
Set the column type - used for filtering and sorting string processing.Four types (string, numeric, date and html (which will strip HTML tags before ordering)) are currently available.
列のタイプを設定し、フィルタおよびソートの文字列処理に使用します.
visible
bVisible
Enable or disable the display of this column
列を表示するかどうかを設定
width
sWidth
Column width assignment
列の幅の定義
参考資料:http://datatables.net/reference/option/
このページの抜粋https://blog.csdn.net/u013380777/article/details/52067483ありがとうございます