AngularJS DataTable Plugin Rending the HTML with Angular Event Tigger such as ng-click

To make the Angular action trigger from the DataTable plugin, you just need add the below code within the loadDataTable Function.

// Define this function first.
function createdRow(row, data, dataIndex) 
{
 // Recompiling so we can bind Angular directive to the DT
 $compile(angular.element(row).contents())(scope);
}

// Then, add the below line with the "DTOptionsBuilder.newOptions()"
.withOption('createdRow', createdRow);

Please find the sample complete function with above added code.

	function getUsersDataTable(scope, $state, $stateParams, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder, $compile, $filter)
	{
	scope.searchQuery = '';
	scope.dtInstanceCallback = function (dtInstance) {
	var datatableObj = dtInstance.DataTable;
	scope.tableInstance = datatableObj;
	};
	scope.searchTable = function () {
	var query = scope.searchQuery;
	scope.tableInstance.search(query).draw();
	};
	scope.dtOptions = DTOptionsBuilder.newOptions()
	.withOption('ajax', {
	dataSrc: 'data',
	url: 'api/v1/admin/users',
	type: 'GET'
	})
	.withOption('processing', true)
	.withOption('serverSide', true)
	//.withOption("sScrollX", "100%")
	.withDOM('rt<"table-tools-group"<"dt-paginate-wrapper"p><"dt-info-wrapper"i><"dt-length-wrapper"l><"clear">><"clear">')
	.withPaginationType('full')
	.withOption('createdRow', createdRow);
	function createdRow(row, data, dataIndex)
	{
	// Recompiling so we can bind Angular directive to the DT
	$compile(angular.element(row).contents())(scope);
	}
	scope.dtColumns = [
	DTColumnBuilder.newColumn('id').withTitle('').renderWith(actionEditHtml).notSortable(),
	DTColumnBuilder.newColumn('first_name').withTitle('Name')
	.renderWith(
	function (data, type, full) {
	return full.first_name + ' ' + full.last_name;
	}
	)
	];
	function actionEditHtml(data, type, full, meta)
	{
	return '<a ng-click="edit(' + full.id + ')" class="cursor_hand" title="Edit User">' +
	'<md-icon md-font-set="material-icons">edit</md-icon></a>';
	}
	scope.edit = function (id) {
	console.log('edit id', id);
	}
	}
	// Then, call the above function from the Angular Controller:
	/* Calling the above function from the Angular Controller */
	getUsersDataTable($scope, $state, $stateParams, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder, $compile, $filter);

view raw AngularJS - DataTable Plugin Rending the HTML with Angular Event Tigger such as ng-click hosted with ❤ by GitHub

	<!-- Below is the HTML Code for view file. -->
	<md-card>
	<md-card-content>
	<div layout layout-align="space-between center" >
	<md-input-container flex="25">
	<label>
	<md-icon md-font-set="material-icons md-dark" icon='search'>
	search
	</md-icon>
	Search</label>
	<input type="text" ng-model="searchQuery" ng-change="searchTable()"/>
	</md-input-container>
	</div>
	<table datatable="" dt-options="dtOptions" dt-instance="dtInstanceCallback" dt-columns="dtColumns"
	class="mdDataTable">
	</table>
	<div class="mdDataTable-footer" layout="row"></div>
	</md-card-content>
	</md-card>

view raw view-file.html hosted with ❤ by GitHub