jQuery DataTable-JavaScript API

虽然大多数时候你的Javascript交互将通过使用datatable初始化对象作为描述在使用这个网站的部分,有时,你会发现它有用一些外部控制表。可以使用以下函数从jQuery。dataTable对象。

也有一些插件API函数可用的扩展的功能之外的datatable内置函数描述这个页面。

注意对于那些使用服务器端处理:大量的API函数假设数据存储在客户端完成它,而不是在服务器端。这样的功能,比如fnAddData和 fnDeleteRow不会影响数据库的数据上举行。事实上datatable不知道如果你即使使用一个数据库!因此,你必须使需要对服务器的调用来操作 数据的要求,然后简单地重新划定表(fnDraw)来查看新的数据。

---

$

执行一个jQuery选择器动作在桌子的TR元素(从中的tbody)和返回结果的jQuery对象。

Input parameters:

1. {string|node|jQuery}: jQuery选择器或节点收集行事
2. {object}: 可选参数的修改的行被包括
3. {string} [default=none]: 选择TR元素,满足当前的筛选标准(“applied”)或所有TR元素(即没有过滤器)。
4. {string} [default=current]: TR元素的顺序在处理数组。可以是“当前”,即当前的排序表的使用,或“原创”即原始订单数据读入使用的表。
5. {string} [default=all]: 限制选择当前显示的页面(“current”)or not(“all”)。如果当前的是给定的,然后顺序被认为是“当前”和过滤器是‘应用’,不管它们是什么了

Return parameter:

{object}: jQuery object,过滤给定的选择器.

Code example:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    // Highlight every second row

    oTable.$(‘tr:odd’).css(‘backgroundColor’, ‘blue’);

});

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    // Filter to rows with ‘Webkit’ in them, add a background colour and then

    // remove the filter, thus highlighting the ‘Webkit’ rows only.

    oTable.fnFilter(‘Webkit’);

    oTable.$(‘tr’, {

        “filter”: “applied”

    }).css(‘backgroundColor’, ‘blue’);

    oTable.fnFilter(”);

});

一

在操作几乎相同的$,但在这种情况下返回的数据匹配的行——因此,jQuery选择器使用TR行应该匹配节点或TD / THCell节点,而不是任何的后代,所以这些数据能够获取的行/单元。如果匹配的行被发现,返回的数据是原始数据数组/对象用于创建行(或一个生成的数 组如果从一个DOM源)。

此方法经常是有用的结合两$函数给出了相同的参数和数组索引将完全匹配。

Input parameters:

1. {string|node|jQuery}: jQuery选择器或节点收集行事
2. {object}: 可选参数的修改的行被包括
3. {string} [default=none]: 选择TR元素,满足当前的筛选标准(“applied”)或所有TR元素(即没有过滤器)。
4. {string} [default=current]: TR元素的顺序在处理数组。可以是“当前”,即当前的排序表的使用,或“原创”即原始订单数据读入使用的表。
5. {string} [default=all]: 限制选择当前显示的页面(“current”)or not(“all”)。如果当前的是给定的,然后顺序被认为是“当前”和过滤器是‘应用’,不管它们是什么了

Return parameter:

{array}:数据匹配的元素。如果任何元素,结果的选择器,没有TR,TD或TH元素在DataTable,他们将有一个空条目数组中。

Code example:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    // Get the data from the first row in the table

    var data = oTable._(‘tr:first’);

    // Do something useful with the data

    alert(“First cell is: ” + data[0]);

});

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    // Filter to ‘Webkit’ and get all data for

    oTable.fnFilter(‘Webkit’);

    var data = oTable._(‘tr’, {

        “filter”: “applied”

    });

    // Do something with the data

    alert(data.length + ” rows matched the filter”);

});

fnAddData

添加一个新行或多行数据到表。请注意,这是适合客户端处理只有——如果您使用的是服务器端处理(即。“bServerSide”:真正的),然后添加数据,您必须将它添加到数据源,即服务器端,通过一个Ajax调用。

Input parameters:

    1.{array|object}: 数据添加到表。这可以:

1D array of data -添加一个单一行提供的数据

2D array of arrays -添加多行的一个调用

object -数据对象在使用mData

array of objects -多个数据对象使用mData

2.{bool} [default=true]: 重绘表或不重绘

Return parameter:

    {array}:整数数组,代表了在aoData列表的索引({ @link DataTable.models.oSettings })被添加到表

Code example:

// Global var for counter

var giCount = 2;

$(document).ready(function() {

    $(‘#example’).dataTable();

});

function fnClickAddRow() {

    $(‘#example’).dataTable().fnAddData([giCount + ".1", giCount + ".2", giCount + ".3", giCount + ".4"]);

    giCount++;

}

fnAdjustColumnSizing

  这个函数将使datatable重新计算列的大小,根据表中的数据和大小应用到列(在DOM中,CSS或通过sWidth参数)。 这可能是有用的,宽度的表的父元素的变化(例如一个窗口大小调整)。

Input parameters:输入参数: {boolean} [default=true]: 重绘或不重绘,你通常会想

Return parameter:返回参数:

Code example:代码示例:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable({

        “sScrollY”: “200px”,

        “bPaginate”: false

    });

    $(window).bind(‘resize’,

    function() {

        oTable.fnAdjustColumnSizing();

    });

});

fnClearTable

快速而简单地清楚一个表

Input parameters:输入参数: {bool} [default=true]: 重绘或不重绘

Return parameter:返回参数:

Code example:代码示例:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    // Immediately ‘nuke’ the current rows (perhaps waiting for an Ajax callback…)

    oTable.fnClearTable();

});

fnClose

相反,打开的一行,此函数将关闭任何行目前是“open”。

Input parameters:输入参数: {node}: the table row to ‘close’

Return parameter:返回参数: {int}:0成功,或1如果失败(找不到行)

Code example:代码示例:

$(document).ready(function() {

    var oTable;

    // ‘open’ an information row when a row is clicked on

    $(‘#example tbody tr’).click(function() {

        if (oTable.fnIsOpen(this)) {

            oTable.fnClose(this);

        } else {

            oTable.fnOpen(this, “Temporary row opened”, “info_row”);

        }

    });

    oTable = $(‘#example’).dataTable();

});

fnDeleteRow

为表删除一行

Input parameters:输入参数: {mixed}:该指数从aoData的行被删除,或TR元素你想删除

{function|null}: Callback function

{bool} [default=true]: 重绘或不是重绘

Return parameter:返回参数: {array}: 行被删除

Code example:代码示例:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    // Immediately remove the first row

    oTable.fnDeleteRow(0);

});

fnDestroy

恢复表本来的状态在DOM中删除所有datatable的增强,修改DOM结构的表和事件监听器。

Input parameters:输入参数: {boolean} [default=false]:完全删除表从DOM

Return parameter:返回参数:

Code example:代码示例:

$(document).ready(function() {

    // This example is fairly pointless in reality, but shows how fnDestroy can be used

    var oTable = $(‘#example’).dataTable();

    oTable.fnDestroy();

});

fnDraw

Show details Redraw the table重绘

Input parameters:输入参数: {bool} [default=true]: 重新过滤和重新排序(如果启用)表在画表之前。

Return parameter:返回参数:

Code example:代码示例:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    // Re-draw the table – you wouldn’t want to do it here, but it’s an example

    oTable.fnDraw();

});

fnFilter

基于数据过滤输入

Input parameters:输入参数: {string}: 字符串来过滤表

{int|null}:列来限制过滤来

{bool} [default=false]: 使用正则表达式或不使用

{bool} [default=true]: 执行智能过滤或不是

{bool} [default=true]: 显示输入全局过滤器在它的输入框

{bool} [default=true]:做不区分大小写匹配(true)或不(false)

Return parameter:返回参数:

Code example:代码示例:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    // Sometime later – filter…

    oTable.fnFilter(‘test string’);

});

fnGetData

获取数据对整个表,一个单独的行或单个Cell基于提供的参数。

Input parameters:输入参数: {int|node}: 一个TR行节点, TD/TH cell 节点 或一个整数。 如果给定作为TR节点那么数据来源将返回整个行。如果给出一个TD / THCell节点然后iCol将自动计算并返回的数据单元。如果作为一个整数,那么这可以看作是aoData内部数据索引的行(参见 fnGetPosition)和数据使用那一行。

{int}: 可选的列的索引,您想要的数据。

Return parameter:返回参数: {array|object|string}: 如果mRow是未定义,那么数据返回所有行。如果mRow被定义,只是数据,并iCol那一行定义,只有数据返回指定的Cell。

Code example:代码示例:

// Row data

$(document).ready(function() {

    oTable = $(‘#example’).dataTable();

    oTable.$(‘tr’).click(function() {

        var data = oTable.fnGetData(this);

        // … do something with the array / object of data for the row

    });

});

// Individual cell data

$(document).ready(function() {

    oTable = $(‘#example’).dataTable();

    oTable.$(‘td’).click(function() {

        var sData = oTable.fnGetData(this);

        alert(‘The cell clicked on had the value of ‘ + sData);

    });

});

fnGetNodes

得到一个数组的TR节点用于表的身体。注意,您通常会希望使用’$’ API方法优先于这个因为它更灵活。

Input parameters:输入参数: {int}:可选的行指数为TR元素你想要的

Return parameter:返回参数: {array|node}: 如果iRow是未定义的,返回一个数组中的元素的所有TR表的身体,或iRow被定义,只是TR元素要求。

Code example:代码示例:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    // Get the nodes from the table

    var nNodes = oTable.fnGetNodes();

});

fnGetPosition

得到数组索引特定Cell从它的DOM元素和列索引包括隐藏的列

Input parameters:输入参数: {node}: 这可以是一个TR TD或TH,在表的body

Return parameter:返回参数: {int}: 如果nNode为TR,然后返回一个索引,或者作为一个单元,一个数组(行索引、列索引(可见)、列索引(所有)]了。

Code example:代码示例:

$(document).ready(function() {

    $(‘#example tbody td’).click(function() {

        // Get the position of the current data from the node

        var aPos = oTable.fnGetPosition(this);

        // Get the data array for this row

        var aData = oTable.fnGetData(aPos[0]);

        // Update the data array and return the value

        aData[aPos[1]] = ‘clicked’;

        this.innerHTML = ‘clicked’;

    });

    // Init DataTables

    oTable = $(‘#example’).dataTable();

});

fnIsOpen

检查一行是“open”or not。

Input parameters:输入参数: {node}: 表行检查

Return parameter:返回参数: {boolean}: true如果行目前是‘open’,false否则

Code example:代码示例:

$(document).ready(function() {

    var oTable; // ‘open’ an information row when a row is clicked on

    $(‘#example tbody tr’).click(function() {

        if (oTable.fnIsOpen(this)) {

            oTable.fnClose(this);

        } else {

            oTable.fnOpen(this, “Temporary row opened”, “info_row”);

        }

    });

    oTable = $(‘#example’).dataTable();

});

fnOpen

这个函数将一个新行后直接行目前显示在页面上,用HTML内容传递到函数。这可以使用,例如,要求确认某一记录应该被删除。

Input parameters:输入参数: {node}: The table row to ‘open’

{string|node|jQuery}: HTML放入行

{string}: Class to give the new TD cell

Return parameter:返回参数: {node}: 行已经打开。注意,如果表行传入的第一个参数,不存在表,这个方法将返回。

Code example:代码示例:

$(document).ready(function() {

    var oTable;

    // ‘open’ an information row when a row is clicked on

    $(‘#example tbody tr’).click(function() {

        if (oTable.fnIsOpen(this)) {

            oTable.fnClose(this);

        } else {

            oTable.fnOpen(this, “Temporary row opened”, “info_row”);

        }

    });

    oTable = $(‘#example’).dataTable();

});

fnPageChange

改变分页-提供内部逻辑分页在一个简单的API函数。您可以使用此函数有一个datatable表进行下一个,以前,第一或最后一页。

Input parameters:输入参数: {string|int}: Paging action to take: “first”, “previous”, “next” or “last” or page number to jump to (integer),注意   page 0 is the first page.

{bool} [default=true]: 重绘或不重绘

Return parameter:返回参数:

Code example:代码示例:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    oTable.fnPageChange(‘next’);

});

fnSetColumnVis

显示一个特定列

Input parameters:输入参数: {int}: 列的显示被改变

{bool}: Show (true) or hide (false) the column

{bool} [default=true]: 重绘或不重绘

Return parameter:返回参数:

Code example:代码示例:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    // Hide the second column after initialisation

    oTable.fnSetColumnVis(1, false);

});

fnSettings

得到设置为特定的表为外部操作

Input parameters:输入参数:

Return parameter:返回参数: {object}: datatable设置对象。See {@link DataTable.models.oSettings}看到{ @link DataTable.models.oSettings }

Code example:代码示例:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    var oSettings = oTable.fnSettings();

    // Show an example parameter from the settings

    alert(oSettings._iDisplayStart);

});

fnSort

由一个特定的表排序的列

Input parameters:输入参数: {int}: 数据索引来排序。注意,这将不匹配”display index”如果你有隐藏的数据条目

Return parameter:返回参数:

Code example:代码示例:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    // Sort immediately with columns 0 and 1

    oTable.fnSort([[0, 'asc'], [1, 'asc']]);

});

fnSortListener

添加一个排序侦听器给一个给定的列元素

Input parameters:输入参数: {node}: 元素附加排序侦听器

{int}: 列单击该节点将排序

{function}: 回调函数运行时进行排序

Return parameter:返回参数:

Code example:代码示例:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    // Sort on column 1, when ‘sorter’ is clicked on

    oTable.fnSortListener(document.getElementByIdx_x(‘sorter’), 1);

});

fnUpdate

更新一个表格单元格或行——这种方法将接受单个值来更新Cell,数组和一个元素的值为每一列或一个物体在相同的 式与原始数据源。自参照的功能是为了使多列更新变得更为容易。

Input parameters:输入参数: {object|array|string}: 数据来更新cell/row

{node|int}:TR元素你想更新或aoData index

{int}: 列更新(不使用的mData是一个数组或对象)

{bool} [default=true]: 重绘或不是

{bool} [default=true]:执行pre-draw actions 或不是

Return parameter:返回参数: {int}:0成功,1上的错误

Code example:代码示例:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    oTable.fnUpdate(‘Example update’, 0, 0);

    // Single cell

    oTable.fnUpdate(['a', 'b', 'c', 'd', 'e'], 1, 0);

    // Row

});

fnVersionCheck

提供一个共同的方法插件检查正在使用的版本的datatable,为了确保兼容性。

Input parameters:输入参数: {string}: 版本字符串来检查,在格式“x y z”。注意格式“X”和“X y”也是可以接受的。

Return parameter:返回参数: {boolean}: 真如果这个版本的datatable是大于或等于所需的版本,或假如果这个版本的DataTales是不合适的

Code example:代码示例:

$(document).ready(function() {

    var oTable = $(‘#example’).dataTable();

    alert(oTable.fnVersionCheck(’1.9.0′));

});