I tried to guide this example of using buttons in JQuery datatables to display rows link At the same time I'm seeing the example link I've tried to adapt it to my code. In my case I use a jsp to which I map a js to load the data. My version of jQuery is jquery-1.11.3.min.js and I also use jquery.dataTables.min.js. I try to add the code that goes between the words add, since I have a datatable that works correctly so it does not take the button to expand a row
archivo.jsp
<table id="table1" >
<thead>
<tr>
<!-- Añadido-->
<th width='5%'></th>
<!-- Fin Añadido-->
<th width='5%'>Id</th>
<th width='25%'>Name</th>
<th width='15%'>Actions</th>
</tr>
</thead>
<tbody>
<c:forEach items="${listPersons}" var="person" varStatus="imcStatus">
<tr>
<!-- Añadido-->
<th></th>
<!-- Fin Añadido-->
<th scope="row">${person.id}</th>
<th scope="row">${person.name}</th>
<th scope="row">${person.actions}</th>
</tr>
</c:forEach>
</tbody>
</table>archivo.js
var buscarPorReferencia = function(){
$('table1').dataTable().fnDestroy();
$('table1').DataTable($.extend({
"processing": true,
"serverSide": true,
"searching": false,
"ajax": config.services + "/form/listPersons?id="+$('#id').val(),
"initComplete": function(settings, json) {
comprobarCheckExterna();
if($('#c-id').val() > 0 && $('#subs').val() == 'S') {
// Deshabilitar
charge(false);
}
},
"filter":true,
"columns":[
//Añadido
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
//Fin Añadido
{'data': 'soc', defaultContent: ''},
{'data': 'ref', defaultContent: ''},
{'data': 'type', defaultContent: ''},
{'data': 'subtype', defaultContent: ''},
],
'columnDefs': [{
'targets': 10,
'searchable': false,
'orderable': false,
'className': 'dt',
'render': function (data, type, full, meta){
return '<div class="btn-group btn-group-sm" role="group" aria-label="Small button group"><a href="/greet/constr/fullview.htm?idNet'+full.idNet
+'" class="btn btn-default btn-editar"> <span class="glyphicon-pencil"></span> </a>'
+'</div>';
}
},
{'targets': 4,
'className': 'price',
'render': function (data,type,full,meta){
if(typeof full.priceBefore === 'undefined'){
return '';
}else{
return '<span>'+full.priceBefore+'</span>';
}
}
}]
,dataTableLangES));
//Añadido
/* 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>name1</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>extension</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
// Add event listener for opening and closing details
$('#table-entidad-pagination 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');
}
}//Fin Añadido );
};