title: AngularJS, datatables, and ajax call to php
body: <p>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.</p>
  
  <p>Here is the snippet from <code>old_app.js</code>:</p>
  
  <pre><code>.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;
  
  })
  </code></pre>
  
  <p>Here are the contents of <code>ajax_data.php</code>:</p>
  
  <pre><code>&lt;?php
  echo "[{
  "id": 860,
  "firstName": "Superman",
  "lastName": "Yoda"
  }, {
  "id": 382,
  "firstName": "Someone First Name",
  "lastName": "Bar"
  }]";
  ?&gt;
  </code></pre>
  
  <p>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: <a href="https://stackoverflow.com/questions/28697106/angular-datatables-custom-filter">Angular-DataTables custom filter</a></p>