数据表 .row() 未定义答案

【问题标题】：Datatables .row() is undefined数据表 .row() 未定义
【发布时间】：2014-08-24 02:49:39
【问题描述】：

我想通过单击相关按钮来删除行。数据表是有效的，我可以使用一些基本功能，如在数据表中排序和搜索，但是当我单击按钮时它只是简单地说未定义的错误：

供您参考，我正在使用数据表 1.10 和 jquery 1.10.2

代码：

<table cellpadding="0" cellspacing="0" border="0" class="row-border" id="table">
<thead>
    <th>Video ID</th>
    <th>Filename</th>
    <th>Action</th>
</thead>
<tbody>
    <td>1</td>
    <td>ABCD</td>
    <td><input type='button' name='deleteBtn' value='Delete' />
</tbody>
<tfoot>
    <tr>
        <th>Video ID</th>
        <th>Filename</th>
        <th>Action</th>
    </tr>
</tfoot>
</table>

<script src="jquery.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script type="text/javascript">
var table = $('#table').dataTable( {} );

$('#table tbody').on('click',"input[type='button']",function() {
    table
        .row( $(this).parents('tr') )**
        .remove()
        .draw();
});
</script>
</body>
</html>

【问题讨论】：

把你的脚本放在 $(document).ready(function{});

标签： javascript jquery datatables undefined jquery-datatables

【解决方案1】：

它不起作用，因为 dataTable() 构造函数和 1.10.x (see docs) 中引入的 DataTable() 构造函数之间存在巨大差异：

两者的区别在于第一个会返回一个jQuery 对象，而第二个返回一个 DataTables API 实例。

简单的改变

var table = $('#table').dataTable( {} );

到

var table = $('#table').DataTable( {} );

如果您想通过 table 变量处理新的 dataTables API。
查看您的代码是否正常工作 -> http://jsfiddle.net/Sd6UQ/

注意：记得使用<tr>..</tr> 并正确关闭<td>。 dataTables 可能对格式错误的标记非常敏感。

【讨论】：

为了清楚起见：区别在于dataTable() 的首字母为小写（旧）和DataTable() 的首字母为大写（新）。当我第一次阅读时忽略了它，明确提及它...... :-)
很好的答案！节省时间。

【解决方案2】：

如果您决定以这种方式创建数据表

table = $('#table').dataTable( {} )

您将在表 var 中获得一个 jQuery 对象但您可以通过以下指令访问 dataTable api

table.api()

你可以看到它在这里运行

http://jsfiddle.net/Sd6UQ/

如果您无权访问数据表创建说明，则可以使用该技术

<script>
    //datatable creation is in another file
    //$('#table').dataTable( {} )

    $("button[name'deleteBtn']").click(function(){
        var row = $(this).closest("tr");
        var table = row.closest('table').dataTable();
        table.api()
             .row( row )
             .remove()
             .draw();
    })
<script>

你可以看到它在这里工作

http://jsfiddle.net/r2ue74zn/

【讨论】：

【解决方案3】：

您只需添加以下代码即可重新加载数据表

//var table = $('#table').dataTable( {} );
table.ajax.reload();

【讨论】：