ProgramLanguage/Script/JavaScript/jQuery
カスタマイズできるグリッドにデータを表示するコントロールを表します。
DataTable クラスの新しいインスタンスを初期化します。
| 名称 | 備考 |
| dataTable | DataTable クラスのインスタンスを生成します。 |
oInit)
var oTable = $('#example').dataTable();
| $ | |
| _ | |
| fnAddData | データを追加します。 |
| fnAdjustColumnSizing | すべての列幅を調節する。 |
| fnClearTable | すべてのレコードをクリアする。 |
| fnClose | fnOpen メソッドで追加された行を削除する。 |
| fnDeleteRow | 行を削除する。 |
| fnDestroy | 表を破棄する。 |
| fnDraw | 表を再描画する。 |
| fnFilter | 文字列に一致した行を表示する。 |
| fnGetData | 指定した行のすべての列の値、または、指定されたセルの値を示します。 |
| fnGetNodes | 指定した行のDOMツリーを示します。 行を指定しない場合は、すべての行のDOMツリーを配列で定義して示します。 |
| fnGetPosition | 行番号、または列番号を示します。 行番号は内部的な番号のみですが、列番号は描画上と内部的な番号の二種類が示されます。 |
| fnIsOpen | fnOpen メソッドで新規行が描画されている状態であるかを示します。 |
| fnOpen | 指定された行の後に新しい行が追加されます。 追加された行は描画上のものであり、fnAddData のようにデータを動的に追加する機能とは違います。 |
| fnPageChange | 指定したページに移動します。 |
| fnSetColumnVis | 列を表示するかどうかを設定する。 |
| fnSettings | 設定情報を取得する。 |
| fnSort | 行を並べ替えます。 |
| fnSortListener | 指定されたオブジェクトのアクションイベントで行が並べ替えられるよう設定します。 例えば、ボタンがクリックされた時に行を並べ替えたいときに使用します。 |
| fnUpdate | 指定された行のすべての列の値、または、指定されたセルの値を更新する。 |
| fnVersionCheck | 互換性を保証するためにプラグインが使用しているDataTablesのバージョンをチェックする。 |
fnAddData(
mData
,bRedraw
)
var giCount = 1;
$(document).ready(function() {
$('#example').dataTable();
});
function fnClickAddRow() {
$('#example').dataTable().fnAddData(
[
giCount + ".1"
,giCount + ".2"
,giCount + ".3"
,giCount + ".4"
]);
giCount++;
}
var giCount = 1;
$(document).ready(function() {
$('#example').dataTable();
});
function fnClickAddRow() {
$('#example').dataTable().fnAddData(
[
[
giCount + ".1"
,giCount + ".2"
,giCount + ".3"
,giCount + ".4"
]
,[
giCount + ".5"
,giCount + ".6"
,giCount + ".7"
,giCount + ".8"
]
]);
giCount++;
}
var giCount = 1;
$(document).ready(function() {
$('#example').dataTable({
"aoColumns" :
[
{"mDataProp" : "Column1"}
,{"mDataProp" : "Column2"}
,{"mDataProp" : "Column3"}
,{"mDataProp" : "Column4"}
]
});
});
function fnClickAddRow() {
$('#example').dataTable().fnAddData(
{
"Column1" : giCount + ".1"
,"Column2" : giCount + ".2"
,"Column3" : giCount + ".3"
,"Column4" : giCount + ".4"
});
giCount++;
}var giCount = 1;
$(document).ready(function() {
$('#example').dataTable({
"aoColumns" :
[
{"mDataProp" : "Column1"}
,{"mDataProp" : "Column2"}
,{"mDataProp" : "Column3"}
,{"mDataProp" : "Column4"}
]
});
});
function fnClickAddRow() {
$('#example').dataTable().fnAddData(
[
{
"Column1" : giCount + ".1"
,"Column2" : giCount + ".2"
,"Column3" : giCount + ".3"
,"Column4" : giCount + ".4"
}
,{
"Column1" : giCount + ".5"
,"Column2" : giCount + ".6"
,"Column3" : giCount + ".7"
,"Column4" : giCount + ".8"
}
]);
giCount++;
}
fnAdjustColumnSizing(
bRedraw
}
fnClearTable(
bRedraw
)
var oTable = $('#example').dataTable();
oTable.fnClearTable();
// 現在のレコード件数を表示
alert(oTable.fnSettings().aoData.length);
fnClose(
nTr
)
fnDeleteRow(
mTarget
,fnCallBack
,bRedraw
)
fnDestroy(
bRemove
)
fnDraw(
bComplete
)
fnFilter(
sInput
,iColumn
,bRegex
,bSmart
,bShowGlobal
,bCaseInsensitive
)
fnGetData(
mRow
,iCol
)
var oTable = $('#example').dataTable();
// 0行目の列の値を配列で受け取る
var oFields = oTable.fnGetData(0);
for (var index = 0; index < oFields.length; index++) {
alert(oFields[index]);
}
$(document).ready(function() {
var oTable = $('#example').dataTable({
"aoColumns" :
[
{"mDataProp" : "Column1"}
,{"mDataProp" : "Column2"}
,{"mDataProp" : "Column3"}
,{"mDataProp" : "Column4"}
,{"mDataProp" : "Column5"}
]
});
});
function btnExecute() {
var oTable = $('#example').dataTable();
// 0行目の0列目の値を取得する
alert(oTable.fnGetData(0, 0));
alert("Column1:" + oFields.Column1);
alert("Column2:" + oFields.Column2);
alert("Column3:" + oFields.Column3);
alert("Column4:" + oFields.Column4);
alert("Column5:" + oFields.Column5);
}
var oTable = $('#example').dataTable();
// 0行目の0列目の値を取得する
alert(oTable.fnGetData(0, 0));
指定した行のDOMツリーを示します。 行を指定しない場合は、すべての行のDOMツリーを配列で定義して示します。
fnGetNodes
iRow
)
function btnExecute() {
var oTable = $('#example').dataTable();
// 0行目のDOMツリーを取得する
var nNodes = oTable.fnGetNodes(0);
alert(nNodes.innerHTML);
for (var index = 0; index < nNodes.childNodes.length; index++) {
alert(nNodes.childNodes[index].innerHTML);
}
}
function btnExecute() {
var oTable = $('#example').dataTable();
// すべての行のDOMツリーを取得する
var nNodes = oTable.fnGetNodes();
for (var index = 0; index < nNodes.length; index++) {
var nNode = nNodes[index];
alert(nNode.innerHTML);
for (var childIndex = 0; childIndex < nNode.childNodes.length; childIndex++) {
alert(nNode.childNodes[childIndex].innerHTML);
}
}
}
nNode)
fnIsOpen(
nTr
)
fnOpen(
nTr
,mHtml
,sClass
)
fnPageChange(
mAction
,bRedraw
)
fnSetColumnVis(
iCol
,bShow
,bRedraw
)fnSettings()
var oTable = $('#example').dataTable();
var oSettings = oTable.fnSettings();
fnSort(
aaSort
)
var oTable = $('#example').dataTable();
// 0列目を昇順で並べ替える
oTable.fnSort([ [0, "asc"] ]);
// 0列目を降順で並べ替える
oTable.fnSort([ [0, "desc"] ]);
// 0列目を昇順で、1列目を降順で並べ替える
oTable.fnSort([ [0, "asc"], [1, "desc"] ]);
fnSortListener(
nNode
,iColumn
,fnCallback
)
$(document).ready(function() {
var oTable = $('#example').dataTable();
// sorter がクリックされたら1列目を並べ替える
oTable.fnSortListener(document.getElementById('sorter'), 1);
});
$(document).ready(function() {
var oTable = $('#example').dataTable();
// sorter がクリックされたら1列目を並べ替える
// 並べ替えが終了したらbtnExecute関数を実行する
oTable.fnSortListener($('#sorter'), 1, btnExecute);
});
function btnExecute() {
alert('btnExecute');
}
fnUpdate(
mData
,mRow
,iColumn
,bRedraw
,bAction
)
$(document).ready(function() {
var oTable = $('#example').dataTable();
oTable.$('tr').click( function () {
oTable.fnUpdate(
[
"0列目"
,"1列目"
,"2列目"
,"3列目"
,"4列目"
]
,this
,undefined
);
});
});
$(document).ready(function() {
var oTable = $('#example').dataTable({
"aoColumns" :
[
{"mDataProp" : "Column1"}
,{"mDataProp" : "Column2"}
,{"mDataProp" : "Column3"}
,{"mDataProp" : "Column4"}
,{"mDataProp" : "Column5"}
]
});
oTable.$('tr').click( function () {
oTable.fnUpdate(
{
"Column1" : "0列目"
,"Column2" : "1列目"
,"Column3" : "2列目"
,"Column4" : "3列目"
,"Column5" : "4列目"
}
,this
,undefined
);
});
});
var oTable = $('#example').dataTable();
oTable.fnUpdate("0行目の0列目", 0, 0);
var oTable = $('#example').dataTable();
oTable.$('tr').click( function () {
oTable.fnUpdate("3列目を変更", this, 3);
} );
});
fnVersionCheck(
sVersion
)
var oTable = $('#example').dataTable();
alert( oTable.fnVersionCheck( '1.9.0' ) );
| 名称 | 備考 |
| fnCookieCallback | |
| fnCreatedRow | |
| fnDrawCallback | |
| fnFooterCallback | |
| fnFormatNumber | |
| fnHeaderCallback | |
| fnInfoCallback | |
| fnInitComplete | |
| fnPreDrawCallback | |
| fnRowCallback | |
| fnServerData | |
| fnServerParams | |
| fnStateLoad | |
| fnStateLoaded | |
| fnStateLoadParams | |
| fnStateSave | |
| fnStateSaveParams |
| 名称 | 備考 |
| aDataSort | |
| asSorting | |
| bSearchable | 列をフィルタリングの対象にするか否かを定義する。 trueならフィルタリングの対象として一致するデータが存在するかの検索対象となります。 falseなら検索対象外となり一致するデータが存在していても無視されます。 |
| bSortable | |
| bUseRendered | |
| bVisible | 列を表示するか否かを定義する。 trueなら列が表示され、falseなら列が表示されない。 非表示にした列はHTMLタグが削除されている状態です。 したがって、非表示列にsubmit用のhidden項目を隠し持っていても送信されません。 |
| fnCreatedCell | |
| fnRender | |
| iDataSort | |
| mDataProp | |
| sClass | |
| sContentPadding | |
| sDefaultContent | |
| sName | |
| sSortDataType | |
| sTitle | |
| sType | 並べ替えに使用する値の型を定義する。 型は"string", "numeric", "date" ,"html" 未指定の場合は"html"となる。 型が文字列だと"5"と"10"を比較した時"10"の方が小さいと判断されるので注意すること |
| sWidth | 列の幅を定義する。 "3em", "20px"などCSSと同様に定義できる。 |
| 名称 | 備考 |
| bAutoWidth | |
| bDeferRender | |
| bFilter | |
| bInfo | |
| bJQueryUI | |
| bLengthChange | |
| bPaginate | |
| bProcessing | |
| bScrollInfinite | |
| bServerSide | |
| bSort | |
| bSortClasses | |
| bStateSave | |
| sScrollX | |
| sScrollY |
| 名称 | 備考 |
| oLanguage.oAria.sSortAscending | |
| oLanguage.oAria.sSortDescending | |
| oLanguage.oPaginate.sFirst | |
| oLanguage.oPaginate.sLast | |
| oLanguage.oPaginate.sNext | |
| oLanguage.oPaginate.sPrevious | |
| oLanguage.sEmptyTable | |
| oLanguage.sInfo | |
| oLanguage.sInfoEmpty | |
| oLanguage.sInfoFiltered | |
| oLanguage.sInfoPostFix | |
| oLanguage.sInfoThousands | |
| oLanguage.sLengthMenu | |
| oLanguage.sLoadingRecords | |
| oLanguage.sProcessing | |
| oLanguage.sSearch | |
| oLanguage.sUrl | |
| oLanguage.sZeroRecords |
| 名称 | 備考 |
| aaData | |
| aaSorting | |
| aaSortingFixed | |
| aLengthMenu | |
| aoSearchCols | |
| asStripeClasses |
| 名称 | 備考 |
| bDestroy | dataTableメソッドでインスタンスを生成するとき、既にインスタンスが生成されている場合は、そのインスタンスを破棄した後に、新たにインスタンスを生成する |
| bRetrieve | dataTableメソッドでインスタンスを生成するとき、既にインスタンスが生成されている場合はそのインスタンスを戻す |
| bScrollAutoCss | |
| bScrollCollapse | |
| bSortCellsTop | |
| iCookieDuration | |
| iDeferLoading | |
| iDisplayLength | |
| iDisplayStart | |
| iScrollLoadGap | |
| iTabIndex | |
| oSearch | |
| sAjaxDataProp | |
| sAjaxSource | |
| sCookiePrefix | |
| sDom | |
| sPaginationType | |
| sScrollXInner | |
| sServerMethod |
| 名称 | 備考 |
| bServerSide | |
| fnServerData | |
| fnServerParams | |
| sAjaxDataProp | |
| sAjaxSource | |
| sServerMethod |