var vm = this;
vm.dt_data = [];
vm.item = {};
vm.edit = edit;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('initComplete', function() {
$timeout(function() {
$compile($('.dt-uikit .md-input'))($scope);
})
})
.withPaginationType('full_numbers')
.withOption('createdRow', function (row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
})
.withOption('ajax', {
dataSrc: function(json) {
json['draw']=1
json['recordsFiltered'] = json.records.length
json['recordsTotal'] =json.records.length
console.log(json)
return json.records;
},
url: 'http://localhost:808/sistemadrp/public/ws/usuarios',
type: 'GET',
})
//.withDataProp('records')
.withOption('processing', true)
.withOption('serverSide', true);
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('Id'),
DTColumnBuilder.newColumn('usuario').withTitle('Usuario'),
DTColumnBuilder.newColumn('nombre').withTitle('Nombre'),
DTColumnBuilder.newColumn('email').withTitle('Email'),
DTColumnBuilder.newColumn('telefono').withTitle('Telefono'),
DTColumnBuilder.newColumn('estado').withTitle('Estado'),
DTColumnBuilder.newColumn('created_at').withTitle('Creado'),
DTColumnBuilder.newColumn(null).withTitle('Acciones').notSortable().renderWith(function(data,type,full){
vm.item[data.id] = data;
return ' <a href="#" data-uk-modal="{target:\'#modal_header_footer\'}" ng-click="showCase.edit(showCase.item[' + data.id + '])">'+
' <i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i></a>'+
' <a href="#" data-uk-modal="{target:\'#modal_header_footer_eliminar\'}" ng-click="showCase.edit(showCase.item[' + data.id + '])">'+
' <i class="md-icon material-icons md-bg-red-900 uk-text-contrast"></i></a>';
})
];
De esta manera funciona la tabla, tenia el problema que los botones generados por cada registro no entraba a la funcion por no hacer uso de $compile
, debia agregar lo siguiente por cada fila que va creando:
.withOption('createdRow', function (row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
})
incluso Mando a llamar un modal y le mando la data para hacer uso de ng-model en el modal.
La tabla queda asi:
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="uk-table" cellspacing="0" width="100%">
</table>