oprn nested table on click on table rows
/* 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>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "../ajax/data/objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// 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( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
Are there any code examples left?
New code examples in category PHP
-
PHP 2022-03-27 22:40:03 index:of curiosa 2019 mp4
-
PHP 2022-03-27 22:35:13 Dijkstra’s algorithm php
-
PHP 2022-03-27 22:35:12 get_declared_classes
-
PHP 2022-03-27 22:30:23 php move index of a value to first position in array
-
PHP 2022-03-27 22:25:01 wordpress get_date
-
PHP 2022-03-27 21:30:38 php shorten string with dots
-
PHP 2022-03-27 21:10:46 php header 500
-
PHP 2022-03-27 21:05:06 laravel schedule run
-
PHP 2022-03-27 20:25:12 Get page title, excerpt or content by id
-
PHP 2022-03-27 20:00:27 php convert date from dd/mm/yyyy to yyyy-mm-dd