Reputation: 39
I'm trying to click on a element of my table in a responsive way, but it doesn't work. It seems that ng-click doesn't work perfectly..
this is my html table:
<table id="listadifferite" datatable="ng" dt-options="myController.dtOptions"
class="table table-bordered table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody>
<td data-dt-column="{{differite.idDif}}_0" class="text-center">Prova</td>
<td data-dt-column="{{differite.idDif}}_1" class="text-center">
<a ng-click="controllerDif.mostraDettaglio(differite)"><i class="fa fa-search-plus"></i></a>
</td>
<td data-dt-column="{{differite.idDif}}_2" class="text-center">Prova</td>
<td data-dt-column="{{differite.idDif}}_3" class="text-center">Prova</td>
</tr>
</tbody>
</table>
and this is dtOptions in myController:
self.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withOption('responsive', {
details: {
type: 'column',
target: 0
}
})
another similar issue here: https://github.com/l-lin/angular-datatables/issues/552
Upvotes: 1
Views: 1065
Reputation: 121
adding this function to the controller fixed it :
function renderer(api, rowIdx, columns) {
var data = $.map( columns, function ( col, i ) {
return col.hidden ?
'<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
'<span class="dtr-title">'+
col.title+
'</span> '+
'<span class="dtr-data">'+
col.data+
'</span>'+
'</li>' :
'';
}).join('');
return data ?
$compile(angular.element($('<ul data-dtr-index="'+rowIdx+'"/>').append( data )))($scope) :
false;
}
and add responsive option
.withOption('responsive', {
details: {
renderer: renderer
}
})
Upvotes: 1