在数据表的新行中添加按钮，未定义答案

【问题标题】：Add button in a new row on datatable, getting undefined在数据表的新行中添加按钮，未定义
【发布时间】：2016-03-19 17:40:11
【问题描述】：

我有一个 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
};

【问题讨论】：

在生成的标记中，您能否确认生成的 onClick 属性已列出 id？即deleteCategory(this, "jh2i4h34ubi43")
我可以确认，即使我在代码中刻录了“id”，它仍然显示未定义。

标签： javascript jquery datatable datatables

【解决方案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>

【讨论】：

【解决方案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();
};

【讨论】：