jQuery的數據表中JSON表中添加新行

Question

我使用：從jquery.dataTables.js：https://datatables.net

我amtrying在我的JSON表中添加一個新行。

我無法讓它工作任何想法爲什麼不呢？

的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（）裏面的按鈕點擊事件。