i have a table with three column ,i want to let the row of the table can collapses and shows the $row[3] in my code when the row are clicked
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js"></script>
<style type="text/css">
td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
$('#example').DataTable();
// Add event listener for opening and closing details
$('#example 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
row.child().show();
tr.addClass('shown');
}
} );
} );
</script>
<table>
<tr>
<td>Time</td>
<td>id</td>
<td>message</td>
</tr>
<? foreach ($shop as $row) : ?>
<tr>
<td><? echo $row[0]; ?></td> //example :2016-06-19T08:00:20.263Z
<td><? echo $row[1]; ?></td> // example : 1.41.2.0.1
<td><? echo $row[3]; ?></td> //'it's a long long long long long long long long long long long long long long long long long message'
</tr>
<tr><td colspan="3"> //collapse/expand data
echo ""type" : "log"
"user::Facility" : "ROUT",
"aggregrate" : "True",
"Severity" : "6",
"tMsgName" : "INIT_PEER",
"MsgText" : "peer down: : received socket disconnect notification ",
"HistTimestamp" : "218 days, 21:52:03.68",
"enterprise" : "1.3.6",
"specific" : "1",
"generic" : "6",
"name" : "john","
</td></tr>
<? endforeach; ?>
</table>
</tbody>
</html>
am i missing anything ?
Please guild me to achieve this.
thanks!
Aucun commentaire:
Enregistrer un commentaire