Angular DataTables with ajax function- $http

Question

I create data table with ajax in Angular.

The code:

app.controller('WithAjaxCtrl', WithAjaxCtrl);

function WithAjaxCtrl($scope,DTOptionsBuilder, DTColumnBuilder,$http) {

    $scope.dateFrom = {value:new Date()}
    $scope.dateTo ={value:new Date()}

//the http success callback return the data
        var successCallback = function (data, status, headers, config) {
            return data;
        }

//the http error callback 
    var errorCallback = function (data, status, headers, config) {
       alert('fail with status '+status)
    }

//The http fuction
        var getRecord = function () {
            var from =  $scope.dateFrom.value;
            var to = $scope.dateTo.value;
            $http.post('/loadRecord/'+from+'/'+to)
                .success(successCallback).error(errorCallback)
        }

//The data tables function
        $scope.filterByDate=function(){
            vm.dtOptions = DTOptionsBuilder.fromSource(getRecord())
                .withPaginationType('full_numbers');
        }

    var vm = this;
    var from =  $scope.dateFrom.value;
    var to = $scope.dateTo.value;
    vm.dtOptions = DTOptionsBuilder.fromSource(getRecord())
        .withPaginationType('full_numbers').withOption('responsive', true);
    vm.dtColumns = [
        DTColumnBuilder.newColumn('xxxx').withTitle('XXXX),
        DTColumnBuilder.newColumn('yyy').withTitle('YYY),

    ];

}

the HTML code:

  <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns"
                   class="row-border hover"></table>

The $http call work successfully.

But nothing incoming into the table!

I think that nothing return from the function but I dont know where can I put the return with the data.

Answer 1

You build the options normally like this

vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(2);
vm.dtColumnDefs = [
    DTColumnDefBuilder.newColumnDef(0),
    DTColumnDefBuilder.newColumnDef(1).notVisible(),
    DTColumnDefBuilder.newColumnDef(2).notSortable()
];

then retrieve the data that needs to be passed on to the table with $http call

$http.post(url,params).then(function success(response) {
                $scope.data = response.data;
            });

and finally use ngRepeat to create your table

<tr ng-repeat="obj in data">
        <td>{{ obj.id }}</td>
        <td>{{ obj.xxxx }}</td>
        <td>{{ obj.yyyy }}</td>
    </tr>

Remember to fix the string literals in the last statement in ctrl

vm.dtColumns = [
    DTColumnBuilder.newColumn('xxxx').withTitle('XXXX),
    DTColumnBuilder.newColumn('yyy').withTitle('YYY),

];

Here 'XXXX should 'XXXX'

Similar example is in the datables docs