AngularJS and DataTables (Icons each line)

serraventura

Hello,

I am using DataTables with AngularJS. I have found a good example on the web. But I have been had difficulties for to put the icons(PDF, EXCEL) in each line. I tryed to use function in mData and mRender, but it does not works.

Follows my code for better understanding:

Directives AngularJS:

[code]

var tableExampleApp = angular.module('tableExample', ['icons']);
var iconApp = angular.module('icons', []);

iconApp.directive('iconPdf', function() {
return {
restrict:'E',
template:'PDF'
}


});

tableExampleApp.directive('myTable', function() {return function(scope, element, attrs) {

// apply DataTable options, use defaults if none specified by user
var options = {};

if (attrs.myTable.length > 0) {
options = scope.$eval(attrs.myTable);
} else {
options = {
"bStateSave": true,
"iCookieDuration": 2419200, /* 1 month */
"bJQueryUI": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bDestroy": true
};
}

// Tell the dataTables plugin what columns to use
// We can either derive them from the dom, or use setup from the controller
var explicitColumns = [];

element.find('th').each(function(index, elem) {
explicitColumns.push($(elem).text());
});

if(explicitColumns.length > 0) {
options["aoColumns"] = explicitColumns;
} else if (attrs.aoColumns) {
options["aoColumns"] = scope.$eval(attrs.aoColumns);
}

// aoColumnDefs is dataTables way of providing fine control over column config
if (attrs.aoColumnDefs) {
options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
}

if (attrs.fnRowCallback) {
options["fnRowCallback"] = scope.$eval(attrs.fnRowCallback);
}

// apply the plugin
var dataTable = element.dataTable(options);



// watch for any changes to our data, rebuild the DataTable
scope.$watch(attrs.aaData, function(value) {
var val = value || null;
if (val) {
dataTable.fnClearTable();
dataTable.fnAddData(scope.$eval(attrs.aaData));
}
});
};

});

[/code]

Controller AngularJS:

[code]


function Ctrl($scope, $http, $window) {

$scope.message = '';

var init = function(){

$http.get('/rest/reports', {headers: {'Accept': 'application/json'}}).success(function(data, status, headers, config){
$scope.reports = data.reportDesign;
});

$scope.STATUS = 'RUNNING';

}();

var checkFormat = function(id, format){

var data = {
designId:id,
format:'pdf'
};

$http.post('/rest/reports/tasks', null, {headers: {'Accept': 'application/json','designId':id,'format':'pdf'}})

.success(function(data, status, headers, config){

var urlReport = headers().location;

if(status==201){

//alert(urlReport);

while($scope.STATUS != 'DONE'){
$scope.checkGenerationReport(urlReport);
alert($scope.STATUS);
}

$window.location = urlReport;

}

/*
for (var key in x) {
var obj = x[key];
for (var prop in obj) {
//alert(prop + " = " + obj[prop]);
}
}
*/





})
.error(function(data, status){
alert(data);
alert(status);
});

};



$scope.checkGenerationReport = function(urlReport){


$http.get(urlReport, {headers: {'Accept': 'application/json'}})
.success(function(data, status, headers, config){
//alert(data.state);
$scope.STATUS = data.state;
})
.error(function(data, status, headers, config){
alert('erro')
})
;

};



$scope.myCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {

$('td:eq(4)', nRow).bind('click', function() {
$scope.$apply(function() {
$scope.someClickHandler(aData);
});
});
return nRow;
};

$scope.someClickHandler = function(info) {
$scope.message = 'clicked: '+ info.id;
checkFormat(info.id, 'pdf');
};

$scope.columnDefs = [
{ "bSearchable":false, "mDataProp": "@uri", "aTargets":[0]},
{ "bSearchable":false, "mDataProp": "id", "aTargets":[1]},
{ "bSearchable":true, "mDataProp": "title", "aTargets":[2] },
{ "bSearchable":false, "mDataProp": "count", "aTargets":[3] },
{ "sDefaultContent": "", "aTargets":[-1],

"mData": function () {return "PDF"}}

];

$scope.overrideOptions = {
"bStateSave": false,
"iCookieDuration": 2419200, /* 1 month */
"bJQueryUI": true,
"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bInfo": true,
"bDestroy": true,
"bAutoWidth": false,

};


}
[/code]

My HTML:

[code]









URI
Id
Title
Count
#








{{message}}



[/code]


This point is where I am trying to change:

[code]

$scope.columnDefs = [
{ "bSearchable":false, "mDataProp": "@uri", "aTargets":[0]},
{ "bSearchable":false, "mDataProp": "id", "aTargets":[1]},
{ "bSearchable":true, "mDataProp": "title", "aTargets":[2] },
{ "bSearchable":false, "mDataProp": "count", "aTargets":[3] },
{ "sDefaultContent": "", "aTargets":[-1],

"mData": function () {return "PDF"}}

];

[/code]

I would like to put icons like standard grids (EDIT, DELETE), but I am going to use icons PDF, EXCEL and HTML. When the user to click on the icon it will call a function Javascript passing parameters.

serraventura

I also tryed to put, "sDefaultContent": "", but it works only outside table, inside table does not work.

This TAG is replaced for PDF for example. But inside table it does not replaced.