Function data attribute in child Datatable: "data is undefined"
Function data attribute in child Datatable: "data is undefined"
grizzlyy
Posts: 6Questions: 2Answers: 0
Hello,
I try to have a Datatable with a child table that is also a Datatable. This works fine when a column's data attribute in the child table is a string. However, when this is a function, I get this error message when i try to open the child table: "data is undefined" (jquery.dataTables.js:2689:5).
I could reproduce the problem with the following code, just click any of the two keywords cells:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<body>
<table id="new_project_table" class="table bg-active table-bordered table-hover table-striped" style="width:100%"
data-server-side="false">
<thead class="thead">
<tr class="table table-primary">
<th>ID</th>
<th>Keywords</th>
</tr>
</thead>
</table>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script>
var table = $('#new_project_table').DataTable({
display: 'bootstrap',
searching: false,
paging: false,
info: false,
data: [
{
'id': 1,
'keywords': [
{
'id': 1,
'text': 'red'
}
]
},
{
'id': 2,
'keywords': [
{
'id': 2,
'text': 'green'
},
{
'id': 3,
'text': 'yellow'
}
]
}
],
columns: [
{
data: 'id'
},
{
data: 'keywords',
className: 'details-control',
render: "[, ].text",
},
]
});
function createChildTable(row) {
var jQTable = $('<table class="display" width="100%"/>');
row.child(jQTable).show();
// Initialise as a DataTable
var keywordTable = jQTable.DataTable({
"data": function (row) { // -> doesn't work
return row.data().keywords;
},
//'data': row.data().keywords, // -> works
"columns": [
{
'title': 'Id',
'data': 'id'
},
{
"title": "Keyword",
"data": "text",
}
],
});
}
$('#new_project_table tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
createChildTable(row);
tr.addClass('shown');
}
});
</script>
</html>
Thx in advance for your help,
Alex
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
According to the
dataoption docs it expects the option to be an array. It is not expecting a function.Kevin
You're right, I mixed this up with https://datatables.net/reference/option/columns.data
Thanks and sorry for the dumb question!
Alex