I'm attempting to utilize a datatable in my AngularJS application. Below is the HTML code I've implemented:
<div ng-app="datatable">
<div ng-controller="voucherlistcontroller">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"
my-table="overrideOptions"
aa-data="voucherList"
ao-column-defs="columnDefs"
fn-row-callback="myCallback" >
<thead>
<tr>
<th>VIN Date</th>
<th>VIN No</th>
<th>Receive Type</th>
<th>Amount</th>
<th>Particulars</th>
<th>Posted</th>
<th>Status</th>
<th>Preview</th>
</tr>
</thead>
<tbody ng-repeat = " vlist in voucherList">
<tr>
<td>{{vlist.vindate}}</td>
<td>{{vlist.vinno}}</td>
<td>{{vlist.receivetype}}</td>
<td>{{vlist.amount}}</td>
<td>{{vlist.particulars}}</td>
<td>{{vlist.posted}}</td>
<td>{{vlist.status}}</td>
<td>{{vlist.preview}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Below is the angularJS code I've utilized:
var dialogApp = angular.module('datatable', []);
dialogApp.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,
"sDom":"lftipr",
"searching": true,
"iCookieDuration": 2419200, /* 1 month */
"bJQueryUI": true,
"bPaginate": true,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bDestroy": true
};
}
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);
}
if (attrs.aoColumnDefs) {
options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
}
if (attrs.fnRowCallback) {
options["fnRowCallback"] = scope.$eval(attrs.fnRowCallback);
}
var dataTable = element.dataTable(options);
scope.$watch(attrs.aaData, function(value) {
var val = value || null;
if (val) {
dataTable.fnClearTable();
dataTable.fnAddData(scope.$eval(attrs.aaData));
}
});
};
});
dialogApp.controller("voucherlistcontroller" ,function Ctrl($scope) {
$scope.message = '';
$scope.myCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$('td:eq(2)', nRow).bind('click', function() {
$scope.$apply(function() {
$scope.someClickHandler(aData);
});
});
return nRow;
};
$scope.someClickHandler = function(info) {
$scope.message = 'clicked: '+ info.price;
};
$scope.columnDefs = [
{ "mDataProp": "vindate", "aTargets":[0]},
{ "mDataProp": "vinno", "aTargets":[1] },
{ "mDataProp": "receivetype", "aTargets":[2]},
{ "mDataProp": "amount", "aTargets":[3]},
{ "mDataProp": "particulars", "aTargets":[4]},
{ "mDataProp": "posted", "aTargets":[5]},
{ "mDataProp": "status", "aTargets":[6]},
{ "mDataProp": "preview", "aTargets":[7]}
];
$scope.overrideOptions = {
"bStateSave": true,
"sDom":"lftipr",
"searching": true,
"iCookieDuration": 2419200, /* 1 month */
"bJQueryUI": true,
"bPaginate": true,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bDestroy": true
};
$scope.voucherList = [--some data-];
An error message shows up stating - TypeError: element.find(...).each is not a function at Object.. While all the necessary references have been provided on the HTML page, such as:
- JQuery-1.9.0
- JQUery-migrate 1.2.1.js
- bootstrap.bundle.min.js
- jquery-ui.min.js
- https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js
- https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js
Any suggestions on how to resolve this issue will be greatly appreciated. Thank you!