I have the following script, was already working perfectly, then the need arose to put a second level in each record of the table. In the first column I have a button that when clicked will open the details of that record, just like the one in the image below

<script type="text/javascript" language="javascript">
$(document).ready(function() {
console.log("Entrou na função");
console.log("Versão DataTable=" + $.fn.dataTable.version);
//init the table
var dataTable = $('#employee-grid').DataTable({
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.12/i18n/Portuguese-Brasil.json"
},
"columnDefs": [{
className: "details-control",
"targets": [0]
}],
//********************
//"destroy": true,
"processing": true,
"serverSide": true,
"ajax": {
url: "phpmysql_serverside.php", // json datasource
type: "post", // method , by default get
error: function() { // error handling
$(".employee-grid-error").html("");
$("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">Sem registros</th></tr></tbody>');
$("#employee-grid_processing").css("display", "none");
}
}
});
var oTable;
oTable = $('#employee-grid').DataTable();
$('#aplicativos').change(function() {
if ($(this).find("option:selected").text() === "Escolha um APP")
oTable.fnFilter('');
else
oTable.fnFilter($(this).find("option:selected").text());
});
// Add event listener for opening and closing details
$('#employee-grid tbody').on('click', 'td.details-control', function() {
console.log("Click");
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
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
});
/* Formatting function for row details - modify as you need */
function format(d) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Full name:</td>' +
'<td>' + d.name + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extension number:</td>' +
'<td>' + d.extn + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extra info:</td>' +
'<td>And any further details here (images etc)...</td>' +
'</tr>' +
'</table>';
}
</script>
I added the following code when clicking on the first column of the tab. Open a secondary record. But you're giving this error I've tried everything and I do not think the problem
// Add event listener for opening and closing details
$('#employee-grid tbody').on('click', 'td.details-control', function() {
console.log("Click");
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
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
Clicking the button displays the following message:
Uncaught ReferenceError: table is not defined
EDIT The error happens here
Var row = table.row (tr);
I could only add
var oTable = $('#employee-grid').DataTable();
Since you declared variable named oTable, you should stick to this variable name, not to table.
Therefor, use oTable.row instead of table.row.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With