I have a table, with datatable and I want to show the button of the first column as it appears referenced in the Datatable page , I have read the manual a bit but I don't get that part
I want to add that green button with the + sign as shown in the img
------EDITED-----
Thanks to David081 's comment I managed to have the documentation with this row_details link .
My problem is that I am making the request by POST, I am having trouble reflecting my data in the table. ,
Hitting F12 gives me the following msg
Failed to load resource: the server responded with a status of 404 ()
I want to limit that I need to do this by POST since I will add more fields and do a more personalized search.
Annex View code
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>Id</th>
<th>Nombre</th>
<th>Apellidos</th>
<th>Correo</th>
<th>Fecha</th>
</tr>
</thead>
</table>
Annex Js Code
var url = window.location.origin;
var datatableClass = {
"Id": 1,
"Nombre": "127.0.0.1",
"Apellidos": "ADMIN",
"Correo": null,
"Fecha": "20/10/2022",
};
$.ajax({
url: url + "/DataTable/logsPost/" + datatableClass,
cache: "false",
type: 'POST',
data: { datatableClass: datatableClass }
}).done(function (response) {
console.log(response);
var js = JSON.stringify(response);
var dtJson = response;
var length = dtJson.data.length;
if (length > 0) {
var table = $('#example').DataTable({
jsonData: js,
columns: [
{
className: 'dt-control',
orderable: false,
data: null,
defaultContent: '',
},
{ data: 'Id' },
{ data: 'Nombre' },
{ data: 'Apellidos' },
{ data: 'Correo' },
{ data: 'Fecha' },
],
order: [[1, 'asc']],
});
//Add event listener for opening and closing details
$('#example tbody').on('click', 'td.dt-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
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
function format(d) {
return (
'<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Data:</td>' +
'<td>' +
d.data +
'</td>' +
'</tr>' +
'</table>'
);
}
}
else
{
alert("¡No hay Nada...!");
}
})
This is the JSON returned by my controller
{
"data": [
{
"Id": 1,
"Nombre": "Carlos",
"Apellidos": "Marin",
"Correo": "[email protected]",
"Fecha": "16/10/2022 23:27:09",
"data": "Ingeniería de Sistemas. Se trata de ....."
},
{
"Id": 2,
"Nombre": "Crintian",
"Apellidos": "Cuero",
"Correo": "[email protected]",
"Fecha": "16/10/2022 23:27:09",
"data": " La ingeniería civil es ..."
},
{
"Id": 3,
"Nombre": "Maria",
"Apellidos": "Perez",
"Correo": "[email protected]",
"Fecha": "16/10/2022 23:27:09",
"data": "La ingeniería económica hace referencia a ...."
},
{
"Id": 4,
"Nombre": "Pedro",
"Apellidos": "Rodriguez",
"Correo": "[email protected]",
"Fecha": "16/10/2022 23:27:09",
"data": "La ingenieria financiera consiste en ...."
},
{
"Id": 5,
"Nombre": "Sergio",
"Apellidos": "Garcia",
"Correo": "[email protected]",
"Fecha": "16/10/2022 23:27:09",
"data": "La Ingeniería Industrial es ...."
}
]