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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
No comments:
Post a Comment
Please post any queries and comments here.