I'm new to an angularjs project and one thing I've encountered is a feature that uses angular-datatables to display and populate the tables for the project. I'm trying to retrieve data using an ajax call to a php file (which uses an API call to retrieve it). Based on research, I was able to look into server side processing.
Here is the snippet from old_app.js
:
.controller('BasicDatatableCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder, DTInstances, $resource) {
var vm = this;
vm.message = '';
function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// Unbind first in order to avoid any duplicate handler (see https://github.com/l-lin/angular-datatables/issues/87)
angular.element('td', nRow).unbind('click');
angular.element('td', nRow).bind('click', function() {
$scope.$apply(function() {
vm.someClickHandler(aData);
});
angular.element('.row_selected').removeClass('row_selected');
angular.element(nRow).addClass('row_selected');
});
return nRow;
}
vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
url: './ajax/ajax_data.php',
type: 'POST'
})
.withDataProp('')
.withOption('processing', true)
.withOption('serverSide', true)
.withPaginationType('full_numbers');
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
];
DTInstances.getLast().then(function (dtInstance) {
vm.dtInstance = dtInstance;
});
vm.reload = function(event, loadedDT) {
vm.dtInstance.reloadData();
};
function someClickHandler(info) {
vm.message = info.verticals + ' - ' + info.SoldPer;
}
vm.someClickHandler = someClickHandler;
})
Here are the contents of ajax_data.php
:
<?php
echo "[{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda"
}, {
"id": 382,
"firstName": "Someone First Name",
"lastName": "Bar"
}]";
?>
The problem is I'm not getting any results at all. I've tried the solution to this link but I was not able to get it to work: Angular-DataTables custom filter