数据表.row（）未定义

Question

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

为了您的信息，我使用datatable 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>

Answer 1

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

  

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

只需更改

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

到

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

如果您想通过table变量处理新的dataTables API 查看您的代码是否有效 - ＆gt;的 http://jsfiddle.net/Sd6UQ/

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

Answer 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/

Answer 3

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

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