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