CODEWITHSUNDEEP
javascriptjqueryangularjsdatatables
user3195053
user3195053

Reputation: 39

ng-click doesn't work in responsive angular-datatables

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

Answers (1)

Hasan
Hasan

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

Related Questions