• 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′));
    });
  • 相关阅读:
    [王爽汇编语言笔记]内存地址空间
    [zt]Tutorial: Make Vim as Your C/C++ IDE Using c.vim Plugin
    ubuntu下root 密码忘记的解决方法
    脱壳
    远程访问linux服务器
    【自己动手写操作系统学习笔记】1.hello world!
    不会溢出的除法
    javascript 数据类型和值(基础版)
    WebService 使用的简单例子
    SQL group by 和 having
  • 原文地址:https://www.cnblogs.com/li-mei/p/4902624.html
Copyright © 2020-2023  润新知