Schaltfläche in einer neuen Zeile auf Datentabelle hinzufügen, undefined

Question

Ich habe ein JavaScript-Objekt, ich versuche, eine neue Zeile der Datentabelle hinzuzufügen. Eine Spalte ist ein Feld und die andere Spalte sollte eine Schaltfläche enthalten.

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(); 
}; 

Dann, wenn ich in der Schaltfläche "Löschen" klicken, Im in dem 'id' Wert 'undefined' zu werden. Und ich weiß nicht warum, denn wenn ich die Tabelle initialisiere und sie mit den Anfangsdaten ausfülle und den 'mRender' meistens auf die gleiche Weise benutze, funktioniert es.

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

Answer 1

Ich hoffe, das helfen könnte:

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

Vielen Dank für die Antwort! Ich habe es gelöst.

die Datentabelle zu initialisieren, ist dies der folgende Code:

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>"; 
      } 
     } 
    ] 
}); 

Am Final alles wurde gerade beschlossen, das Javascript-Objekt auf diese Weise hinzufügen. Hoffe, das wird mehr Menschen helfen.

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