JavaScript/jQuery/DataTables/日本語リファレンスの履歴(No.8)

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
JavaScript/jQuery/DataTables/日本語リファレンスへ行く。

ProgramLanguage/Script/JavaScript/jQuery

DataTable†

API†

名称	備考
$
_
fnAddData	データを追加します。
fnAdjustColumnSizing	すべての列幅を調節する。
fnClearTable	すべてのレコードをクリアする。
fnClose	fnOpen メソッドで追加された行を削除する。
fnDeleteRow	行を削除する。
fnDestroy	表を破棄する。
fnDraw	表を再描画する。
fnFilter	文字列に一致した行を表示する。
fnGetData
fnGetNodes
fnGetPosition	行番号、または列番号を示します。行番号は内部的な番号のみですが、列番号は描画上と内部的な番号の二種類が示されます。
fnIsOpen	fnOpen メソッドで新規行が描画されている状態であるかを示します。
fnOpen	指定された行の後に新しい行が追加されます。追加された行は描画上のものであり、fnAddData のようにデータを動的に追加する機能とは違います。
fnPageChange	指定したページに移動します。
fnSetColumnVis	列を表示するかどうかを設定する。
fnSettings	設定情報を取得する。
fnSort	行を並べ替えます。
fnSortListener
fnUpdate
fnVersionCheck	互換性を保証するためにプラグインが使用しているDataTablesのバージョンをチェックする。

↑

fnAddData(array | object, boolean)†

概要データを追加します。
構文
```
fnAddData(
     mData
    ,bRedraw
)
```
パラメータ

mData

1D array of data: １件のデータを追加する場合は、配列に列の値を設定して受け渡します。（mDataPropで列名を定義していない場合に使用します。）
2D array of arrays: ２次元配列複数件のデータを追加する場合は、配列に1D array of dataを設定して受け渡します。（mDataPropで列名を定義していない場合に使用します。）
object: １件のデータを追加する場合は、JSON形式で列の値を設定して受け渡します。（mDataPropで列名が定義済みの場合に使用します。）
array of objects: 複数件のデータを追加する場合は、配列にobjectを設定して受け渡します。（mDataPropで列名が定義済みの場合に使用します。）

bRedraw

型:boolean
表を再描画する場合は true。それ以外の場合は false。
既定値は true です。

戻り値

array

解説 mDataPropで列名を定義しているか否かで、単純な配列で値を受け渡すかJSON形式で受け渡すか異なります。

例

1D array of data mDataPropで列名を定義していない場合にデータを追加する方法を次のコード例に示します。

var giCount = 1;
$(document).ready(function() {
    $('#example').dataTable();
});

function fnClickAddRow() {
    $('#example').dataTable().fnAddData(
        [
             giCount + ".1"
            ,giCount + ".2"
            ,giCount + ".3"
            ,giCount + ".4"
        ]);
        
    giCount++;
}

2D array of arrays mDataPropで列名を定義していない場合にデータを追加する方法を次のコード例に示します。

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++;
}

object mDataPropで列名が定義済み場合にデータを追加する方法を次のコード例に示します。

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++;
}

array of objects mDataPropで列名が定義済み場合にデータを追加する方法を次のコード例に示します。

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++;
}

バージョン情報 DataTables 1.9.0
参照

↑

fnAdjustColumnSizing(boolean)†

概要すべての列幅を調節する。
構文 fnAdjustColumnSizing(
```
   bRedraw
```
}
パラメータ

bRedraw: 型:boolean
表を再描画する場合は true。それ以外の場合は false。
既定値は true です。

解説列の幅をデータに基づいて調節します。ただし、sWidth やCSSで列幅を定義している場合は、定義されている列幅が優先されます。
例方法を次のコード例に示します。
バージョン情報 DataTables 1.9.0
参照

↑

fnClearTable(boolean)†

概要すべてのレコードをクリアする。
構文
```
fnClearTable(
    bRedraw
)
```
パラメータ

bRedraw: 型:boolean
表を再描画する場合は true。それ以外の場合は false。
既定値は true です。

解説

例すべてのレコードをクリアする方法を次のコード例に示します。

var oTable = $('#example').dataTable();
oTable.fnClearTable();

// 現在のレコード件数を表示
alert(oTable.fnSettings().aoData.length);

バージョン情報 DataTables 1.9.0
参照

↑

fnClose(node)†

概要 fnOpen メソッドで追加された行を削除する。
構文
```
fnClose(
    nTr
)
```
パラメータ

nTr: 型:node
削除したい行を TR要素 で指定します。

戻り値

int: 0 なら正常終了
1 なら異常終了（対象行が見つからない場合に発生する）

解説
例方法を次のコード例に示します。
バージョン情報 DataTables 1.9.0
参照

↑

fnDeleteRow(int | node, function, boolean)†

概要行を削除する。

構文

fnDeleteRow(
     mTarget
    ,fnCallBack
    ,bRedraw
)

パラメータ

mTarget: 型:int
削除したい行を 0 から始まる数値で指定します。
ここで指定する数値は aoData で保持しているデータの行番号であり、描画上の行番号とは並べ替えやフィルタリングの関係で一致しない場合があります。

型:node
削除したい行を TR要素 で指定します。
fnCallBack: 型:function
行を削除した後に実行したい function を指定します。
fnCallBack.call( this, oSettings, oData );
bRedraw: 型:boolean
表を再描画する場合は true。それ以外の場合は false。
既定値は true です。

戻り値

oData

解説
例行を削除する方法を次のコード例に示します。 DataTables row select example
バージョン情報 DataTables 1.9.0
参照

↑

fnDestroy(boolean)†

概要表を破棄する。
構文
```
fnDestroy(
    bRemove
)
```
パラメータ

bRemove: 型:boolean
既定値は false です。

解説
例方法を次のコード例に示します。
バージョン情報 DataTables 1.9.0
参照

↑

fnDraw(boolean)†

概要表を再描画する。
構文
```
fnDraw(
    bComplete
)
```
パラメータ

bComplete: 型:boolean
不明

解説
例表を再描画する方法を次のコード例に示します。
バージョン情報 DataTables 1.9.0
参照

↑

fnFilter(string, int, boolean, boolean, boolean, boolean)†

概要文字列に一致した行を表示する。

構文

fnFilter(
     sInput
    ,iColumn
    ,bRegex
    ,bSmart
    ,bShowGlobal
    ,bCaseInsensitive
)

パラメータ

sInput: 型:string
比較する文字列を指定します。
iColumn: 型:int
比較したい列を 0 から始まる数値で指定します。
すべての列と比較したい場合は null を指定します。
bRegex: 型:boolean
正規表現を使用する場合は true。それ以外の場合は false。
既定値は false です。
bSmart: 型:boolean
不明
既定値は true です。
bShowGlobal: 型:boolean
比較に使用した値をinput boxに設定する場合は true。それ以外の場合は false。
既定値は true です。
bCaseInsensitive: 型:boolean
大文字・小文字を区別せずに比較する場合はtrue。それ以外の場合は false。

解説
例文字列に一致した行を表示する方法を次のコード例に示します。 DataTables individual column filtering example DataTables individual column filtering example (using select menus)
バージョン情報 DataTables 1.9.0
参照

↑

fnGetPosition(node)†

概要行番号、または列番号を示します。行番号は内部的な番号のみですが、列番号は描画上と内部的な番号の二種類が示されます。
構文 fnGetPosition(
```
   nNode
```
)
パラメータ

nNode: TR要素, TD要素, TH要素 のいずれかを指定します。

戻り値

int

nNode = TR要素: nNode に該当する行番号描画されている行番号とは異なるので注意すること

string

nNode = TD要素: カンマ区切りの文字列で nNode に該当するセルの行番号、描画上の列番号、内部的な列番号

解説
例方法を次のコード例に示します。
バージョン情報 DataTables 1.9.0
参照

↑

fnIsOpen(node)†

概要 fnOpen メソッドで新規行が描画されている状態であるかを示します。
構文
```
fnIsOpen(
    nTr
)
```
パラメータ

nTr: 型:node
fnOpen メソッドで新規行が描画されている状態か確認したい行を TR要素 で指定します。

戻り値

boolean: fnOpen メソッドで新規行が描画されている状態であれば true。それ以外の場合は false。

解説
例方法を次のコード例に示します。
バージョン情報 DataTables 1.9.0
参照

↑

fnOpen(node, string | node | jQuery, string)†

概要指定された行の後に新しい行が追加されます。追加された行は描画上のものであり、fnAddData のようにデータを動的に追加する機能とは違います。

構文

fnOpen(
     nTr
    ,mHtml
    ,sClass
)

パラメータ

nTr: 型:node
追加したい行の直前にある行を TR要素 で指定します。
mHtml: 型:string
追加した行に描画したい文字列を指定します
全ての列が結合された状態になります。

型:node
不明

型:jQuery
不明
sClass: 型:string
新しく追加された TD要素 に指定するクラス

戻り値

node

解説フィルタリングや並べ替えの対象にはなりません。 jQuery UI の Accordion のようなものと考えてください。

同一行に対して fnClose メソッドを実行せずに、複数回 fnOpen メソッドを実行した場合、常に上書きされる。これは fnOpen メソッド内で必ず fnClose メソッドが実行されているからである。
例方法を次のコード例に示します。
バージョン情報 DataTables 1.9.0
参照

↑

fnPageChange(string | int, boolean)†

概要指定したページに移動します。

構文

fnPageChange(
     mAction
    ,bRedraw
)

パラメータ

mAction: 型:string
最初のページに移動する場合は first、現在ページより１ページ戻る場合は previous, 現在ページより１ページ進む場合は next, 最後のページに移動する場合は lastを指定します。

型:int
移動したいページを数値で指定します。0を指定すると最初のページに移動します。
bRedraw: 型:boolean
表を再描画する場合は true。それ以外の場合は false。
既定値は true です。

解説
例方法を次のコード例に示します。
バージョン情報 DataTables 1.9.0
参照

↑

fnSetColumnVis(int, boolean, boolean)†

概要列を表示するかどうかを設定する。

構文

fnSetColumnVis(
     iCol
    ,bShow
    ,bRedraw
)

パラメータ

iCol: 型:int
表示を変更したい列を 0 から始まる数値で指定します。
bShow: 型:boolean
列を表示する場合は true。それ以外の場合は false。
bRedraw: 型:boolean
表を再描画する場合は true。それ以外の場合は false。
既定値は true です。

解説列を表示するかどうかをプログラムによって制御します。
例列を表示するかどうかを示す方法を次のコード例に示します。 DataTables show and hide columns dynamically example
バージョン情報 DataTables 1.9.0
参照

↑

fnSettings()†

概要設定情報を取得する。
構文
```
fnSettings()
```
戻り値

models.oSettings

解説

例設定情報を取得する方法を次のコード例に示します。

var oTable = $('#example').dataTable();
var oSettings = oTable.fnSettings();

バージョン情報 DataTables 1.9.0
参照

↑

fnSort(array)†

概要行を並べ替えます。
構文
```
fnSort(
    aaSort
)
```
パラメータ

aaSort: 型:array
配列の0番目に並べ替えに使用する列を 0 から始まる数値で指定します。
配列の1番目に並べ替える方向を指定します。昇順なら asc。降順なら desc。

解説並べ替えに使用する列と並べ替える方向を指定して並べ替えます。並べ替えに使用する列を複数指定することも可能です。というより、複数の列を指定しない場合でも、複数と同様に指定する必要があります。

例行を並べ替える方法を次のコード例に示します。

var oTable = $('#example').dataTable();

// 0列目を昇順で並べ替える
oTable.fnSort([ [0, "asc"] ]);

// 0列目を降順で並べ替える
oTable.fnSort([ [0, "desc"] ]);

// 0列目を昇順で、1列目を降順で並べ替える
oTable.fnSort([ [0, "asc"], [1, "desc"] ]);

バージョン情報 DataTables 1.9.0
参照

↑

fnVersionCheck(string)†

概要互換性を保証するためにプラグインが使用しているDataTablesのバージョンをチェックする。
構文
```
fnVersionCheck(
    sVersion
)
```
パラメータ

sVersion: 型:string
バージョンを指定します。バージョンの形式は"X", "X.Y", "X.Y.Z"です。

戻り値互換性が保証されているバージョンであれば true。それ以外の場合は false。
解説パラメータに指定されたバージョンより、DataTablesのバージョンが新しいと true（同一のバージョンも含む）。ただし、互換性を本当に保証しているのか不明です。

例方法を次のコード例に示します。

var oTable = $('#example').dataTable();
alert( oTable.fnVersionCheck( '1.9.0' ) );

バージョン情報 DataTables 1.9.0
参照

↑

Callbacks†

名称	備考
fnCookieCallback
fnCreatedRow
fnDrawCallback
fnFooterCallback
fnFormatNumber
fnHeaderCallback
fnInfoCallback
fnInitComplete
fnPreDrawCallback
fnRowCallback
fnServerData
fnServerParams
fnStateLoad
fnStateLoaded
fnStateLoadParams
fnStateSave
fnStateSaveParams

↑

Columns†

名称	備考
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と同様に定義できる。

↑

Features†

名称	備考
bAutoWidth
bDeferRender
bFilter
bInfo
bJQueryUI
bLengthChange
bPaginate
bProcessing
bScrollInfinite
bServerSide
bSort
bSortClasses
bStateSave
sScrollX
sScrollY

↑

Language†

名称	備考
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

↑

Option†

名称	備考
aaData
aaSorting
aaSortingFixed
aLengthMenu
aoSearchCols
asStripeClasses

↑

Options†

名称	備考
bDestroy	dataTableメソッドでインスタンスを生成するとき、既にインスタンスが生成されている場合は、そのインスタンスを破棄した後に、新たにインスタンスを生成する
bRetrieve	dataTableメソッドでインスタンスを生成するとき、既にインスタンスが生成されている場合はそのインスタンスを戻す
bScrollAutoCss
bScrollCollapse
bSortCellsTop
iCookieDuration
iDeferLoading
iDisplayLength
iDisplayStart
iScrollLoadGap
iTabIndex
oSearch
sAjaxDataProp
sAjaxSource
sCookiePrefix
sDom
sPaginationType
sScrollXInner
sServerMethod

↑

Server-side†

名称	備考
bServerSide
fnServerData
fnServerParams
sAjaxDataProp
sAjaxSource
sServerMethod

JavaScript/jQuery/DataTables/日本語リファレンス の履歴(No.8)