在數據表的新行中添加按鈕，未定義

Question

我有一個javascript對象，我正在嘗試向數據表添加新行。 一欄是一個字段，另一欄應包含一個按鈕。

var appendLastCategory = function() {
    var obj = {
        id: 'jh2i4h34ubi43',
        name: 'Lolo',
    };
    $('#categoriesList').DataTable().row.add({
        name: obj.name, //First column
        mRender: function() { //Second column
            return "<a class='md-btn' onClick='deleteCategory(this, &quot;" + obj.id + "&quot;)'>Delete</a>";
        }
    }).draw();
};

然后，當我單擊“刪除”按鈕時，我在“ id”值中得到“未定義”。 而且我不知道為什么，因為當我初始化表格時，用初始數據填充表格並使用'mRender'幾乎相同的方式，它可以正常工作。

var deleteCategory = function(element, id) {
    console.log(id);
    //Blah blah, all the code to delete on backend and remove the row
};

Answer 1

我希望這可以幫助：

 var deleteCategory = function(element, id) { alert(id); //Blah blah, all the code to delete on backend and remove the row }; var appendLastCategory = function () { var obj = { id: 'jh2i4h34ubi43', name: 'Lolo', }; $('#categoriesList').DataTable().row.add({ '0': obj.name, //First column '1': "<a href='#' class='btn btn-info' role='button' onClick='deleteCategory(this, &quot;" + obj.id + "&quot;)'>Delete</a>", }).draw(); }; $(function () { appendLastCategory(); }); 

 <script src="http://code.jquery.com/jquery-1.12.1.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <link href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet"> <script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> <table id="categoriesList" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>name</th> <th>button</th> </tr> </thead> <tfoot> <tr> <th>name</th> <th>button</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>Tiger Nixon</td> </tr> <tr> <td>Garrett Winters</td> <td>Tiger Nixon</td> </tr> <tr> <td>Ashton Cox</td> <td>Tiger Nixon</td> </tr> </tbody> </table> 

Answer 2

感謝您的回復！ 我解決了

要初始化DataTable，這是以下代碼：

var datax = [{
      id: '67i67i634r2r',
      name: 'Lala',
   },{
      id: 'g45y45y657t3',
      name: 'Lele',
   }];
$('#categoriesList').DataTable({
    "data": datax,
    "columns": [
        { data: "name" }, {
            render: function(o, type, data) {
                return "<a class='md-btn' onClick='deleteCategory(this, &quot;" + data.id + "&quot;)'>Delete</a>";
            }
        }
    ]
});

最后，一切都得到解決，只需以這種方式添加javascript對象即可。 希望這會幫助更多的人。

var appendLastCategory = function () {
   var obj = {
      id: 'jh2i4h34ubi43',
      name: 'Lolo',
   };
   $('#categoriesList').DataTable().row.add(obj).draw();
};