web-dev-qa-db-ja.com

データテーブル.row（）は未定義です

関連するボタンをクリックするだけで行を削除します。データテーブルは機能します。データテーブルでの並べ替えや検索などの基本的な機能を使用できます

参考までに、datatable 1.10とjquery 1.10.2を使用しているim enter image description here

コード：

<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>
javascriptjquerydatatablesundefinedjquery-datatables
22
Shin Dapaty

dataTable()コンストラクターと1.10.xで導入されたDataTable()コンストラクターには大きな違いがあるため、機能しません（ docsを参照 ）：

2つの違いは、1つ目はjQueryオブジェクトを返し、2つ目はDataTables APIインスタンスを返すことです。

単に変える

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

に

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

table変数を介して新しいdataTables APIで作業する場合。
コードの動作を確認->http://jsfiddle.net/Sd6UQ/

注意：<tr>..</tr>および閉じる<td>は適切です。 dataTablesは、不正なマークアップに非常に敏感です。

55
davidkonrad

この方法でデータテーブルを作成することにした場合

テーブル= $（ '＃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/

0
Matias Medina

次のコードを追加するだけでデータテーブルをリロードできます

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