Can't populate row detail with different Object in ajax.
Can't populate row detail with different Object in ajax.
whitehat
Posts: 3Questions: 1Answers: 0
Hello,
I have a problem to populate some row detail with different object in ajax.
Ajax return correctly and all Object array is populate.
But, when i try to show the row detail, only the first object is display on all the row detail.
Here my PHP code
<?php
include ('../../sql/config.php');
$sql = "SELECT ekey, printer_name, serial_number, mac_address, ip_address, host_name, domain_name, firmware
FROM msp_devices";
$res = mysqli_query($connect, $sql);
$returnarray = array();
while($row = mysqli_fetch_assoc($res)) {
$rowarray = array(
"ekey" => $row['ekey'],
"printer_name" => $row['printer_name'],
"serial_number" => $row['serial_number'],
"mac_address" => $row['mac_address'],
"ip_address" => $row['ip_address'],
"host_name" => $row['host_name'],
"domain_name" => $row['domain_name'],
"firmware" => $row['firmware']
);
$returnarray[] = $rowarray;
}
mysqli_free_result($res);
echo json_encode($returnarray);
<?php
>
```
?>
And my table code
```js
$(document).ready(function() {
var table = $('#dataTables-inventory').DataTable( {
pagined: true,
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
"language": {
"emptyTable": "Aucune données trouvées.",
"info": "Afficher _START_ à _END_ sur _TOTAL_ entrées",
"sLengthMenu": "Afficher _MENU_ entrées",
"search": "Rechercher",
"paginate": {
"next": "Suivant",
"previous": "Précédent"
}
},
"bProcessing": true,
"serverSide": true,
"sAjaxSource": "../inventory/request/inv-request.php",
"columnDefs": [
{
className: 'details-control',
orderable: false,
targets: 0
},
{ mData: '' },
{ mData: 'dns_name' },
{ mData: 'manufacturer' },
{ mData: 'model' },
{ mData: 'color' },
{ mData: 'location' }
],
order: [[1, 'asc']]
});
// Add event listener for opening and closing details
$('#dataTables-inventory 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
$('div.slider', row.child()).slideUp( function () {
row.child.hide();
tr.removeClass('shown');
});
}
else {
var html = '';
$.post('../inventory/request/details-request.php', function( data ) {
$.each(data, function (i, d) { // loop data retourné par ajax
console.log(d);
html=
'<div class="slider">'+
'<table class="table-striped table-bordered" cellpadding="5" cellspacing="5" border="0">'+
'<tr>'+
'<td style="width:200px;font-weight:bold;font-size:12px;padding-left:5px;">Nom de l\'imprimante : </td>'+
'<td id="printer_name" style="width:200px;font-size: 12px;padding-left:5px;">'+d.printer_name+'</td>'+
'</tr>'+
'<tr>'+
'<td style="width:100px;font-weight: bold;font-size: 12px;padding-left:5px;">N° de série : </td>'+
'<td style="font-size: 12px;padding-left:5px;">'+d.serial_number+'</td>'+
'</tr>'+
'<tr>'+
'<td style="width:100px;font-weight: bold;font-size: 12px;padding-left:5px;">Firmware : </td>'+
'<td style="font-size: 12px;padding-left:5px;">v.'+d.firmware+'</td>'+
'</tr>'+
'<tr>'+
'<td style="width:100px;font-weight: bold;font-size: 12px;padding-left:5px;">Adresse MAC : </td>'+
'<td style="font-size: 12px;padding-left:5px;">'+d.mac_address+'</td>'+
'</tr>'+
'<tr>'+
'<td style="width:100px;font-weight: bold;font-size: 12px;padding-left:5px;">Adresse IP : </td>'+
'<td style="font-size: 12px;padding-left:5px;">'+d.ip_address+'</td>'+
'</tr>'+
'<tr>'+
'<td style="width:100px;font-weight: bold;font-size: 12px;padding-left:5px;">Nom d\'hôte : </td>'+
'<td style="font-size: 12px;padding-left:5px;">'+d.host_name+'</td>'+
'</tr>'+
'<tr>'+
'<td style="width:100px;font-weight: bold;font-size: 12px;padding-left:5px;">Nom de domaine : </td>'+
'<td style="font-size: 12px;padding-left:5px;">'+d.domain_name+'</td>'+
'</tr>';+
'</table>'+
'</div>';
});
row.child( html ).show();
tr.addClass('shown');
$('div.slider', row.child()).slideDown();
}, 'json');
}
});
});
I have trying many solutions but never find.
Thanks to help me 
This discussion has been closed.
Answers
Remove this.
I'm not sure why it is set, but your PHP script isn't implementing server-side processing, so either remove it, or implement server-side processing
Allan
Posted in error.
I removed the line serverSide but can't load the real data on each row details.
When i click on the button to show the row detail, my detail request file return the result 2 times like that :
Object { ekey: "61", printer_name: "PR-OBS-025", serial_number: "LYE07007", mac_address: "88:87:17:e9:b7:ff", ip_address: "10.21.120.251", host_name: "pr-obs-025", domain_name: "casn.net", firmware: "53.10" }
Object { ekey: "60", printer_name: "PR-OBS-002", serial_number: "JWF87064", mac_address: "f4:81:39:c8:7d:75", ip_address: "10.21.251.122", host_name: "PR-OBS-002", domain_name: "casn.net", firmware: "31.01" }
Sounds like your row detail info is contained within an object in the response?
If so then you may need from
+d.serial_number+to+d.<object>.serial_number+in your row detail function.<object>is the name of the object containing the data.If this doesn't help then provide an example output from
console.log(d);.Kevin
Can you give me a link to the page showing the issue or use JSFiddle or similar to construct a test case showing the issue so I can help to debug it.
Thanks,
Allan
@kthorngren
The console.log(d) return me the lines i have post above.
Object { ekey: "61", printer_name: "PR-OBS-025", serial_number: "LYE07007", mac_address: "88:87:17:e9:b7:ff", ip_address: "10.21.120.251", host_name: "pr-obs-025", domain_name: "casn.net", firmware: "53.10" }
Object { ekey: "60", printer_name: "PR-OBS-002", serial_number: "JWF87064", mac_address: "f4:81:39:c8:7d:75", ip_address: "10.21.251.122", host_name: "PR-OBS-002", domain_name: "casn.net", firmware: "31.01" }
i have trying to replace d.printer_name by data[key].printer_name and i have in the console.log the 2 printer_name but in one row detail.
I see, thanks. Seems like what you had originally should work. I misunderstood your previous post.
As Allan mentioned a test case is the best approach to troubleshoot the problem.
Kevin