[英]Add button in a new row on datatable, getting undefined
我有一个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, "" + obj.id + "")'>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
};
我希望这可以帮助:
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, "" + obj.id + "")'>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>
感谢您的回复! 我解决了
要初始化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, "" + data.id + "")'>Delete</a>";
}
}
]
});
最后,一切都得到解决,只需以这种方式添加javascript对象即可。 希望这会帮助更多的人。
var appendLastCategory = function () {
var obj = {
id: 'jh2i4h34ubi43',
name: 'Lolo',
};
$('#categoriesList').DataTable().row.add(obj).draw();
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.