のjQueryのDataTable JSONテーブルに新しい行を追加

Question

私が使用しています：からjquery.dataTables.js：https://datatables.net

は、私は私のJSONのテーブルに新しい行を追加することamtrying。

私はそれがなぜ何かのアイデアを動作させることができませんでしたか？

jsfiddle：http://jsfiddle.net/f7debwj2/17/

HTML：

<table id="example" class="display" width="100%" cellspacing="0"> 
    <thead> 
    <tr> 
     <th>order</th> 
     <th>name</th> 
     <th>country</th> 
    </tr> 
    </thead> 
</table> 

<button id="addRow">Add New Row</button> 
<table id="newRow"> 
    <tbody> 
    <tr> 
     <td>Line 2 
     <input type="hidden" value="2" /> </td> 
     <td>DVap 
     <input type="hidden" value="DVap" /> </td> 
     <td> 
     <input type="text" value="22" /> </td> 
    </tr> 
    </tbody> 
</table> 

jqueryの：

$(document).ready(function() { 
    var dt = $('#example').dataTable(); 
    dt.fnDestroy(); 
}); 

$(document).ready(function() { 
    var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2'; 
    var table = $('#example').DataTable({ 
    ajax: url, 
    rowReorder: { 
     dataSrc: 'order', 
    }, 
    columns: [{ 
     data: 'order' 
    }, { 
     data: 'name' 
    }, { 
     data: 'place' 
    }] 
    }); 
    // add row 
    $('#addRow').click(function() { 
    //t.row.add([1,2,3]).draw(); 
    var rowHtml = $("#newRow").find("tr")[0].outerHTML 
    console.log(rowHtml); 
    dt.row.add($(rowHtml)).draw(); 
    }); 
}); 

Answer 1

あなたは、この行を変更する必要がdocumentationで見ることができるように：

dt.row.add($(rowHtml)).draw(); 

へ：

table.row.add($(rowHtml)).draw(); 

updated fiddle。

Answer 2

はあなたの実際のエラーが キャッチされないにReferenceErrorた：dtはちょうどtable.row.add変更

が定義されていません（$（rowHtml））（ドロー）の代わりにdt.row.add（$の（rowHtml ））。draw（）ボタンのクリックイベント内に描画します。