Table still empty ($resource, $promise, with DataProp)

[naxmefy]

My JS:

$scope.dtOptions = DTOptionsBuilder
.fromFnPromise(function () {
  return PartyService.query().$promise;
})
.withDataProp('results')
.withOption("bProcessing", true)
.withPaginationType('full_numbers');

$scope.dtColumns = [
  DTColumnBuilder.newColumn('id').withTitle('ID'),
  DTColumnBuilder.newColumn('name').withTitle('Name')
];

My HTML:

<table class="table table-striped table-bordered"
       datatable=""
       dt-options="dtOptions"
       dt-columns="dtColumns"></table>

The Response of Query:

{
    "results": [
        {
           "id": 1,
           "name": "party",
           .....
        },
        ....
     ],
    ....
}

U see i put DataProp to "results" coz results are a nested in object - beside are other infos like count of all parties etc...
ServerSide is a Grails application (but nevermind...)

My table is empty (data is loaded, but empty)... can u maybe explain me what is wrong?

[l-lin]

That's because, when using the promise renderer, angular-datatables is just resolving the promise before adding the data to the DataTable's data option and rendering the table.
So angular-datatables expects an array and not a array inside an object.

In short, AjaxDataProp is useless when using the promise way.

[l-lin]

Mmh it might be interesting to add this feature.

[naxmefy]

is it possible to include the data later like this:

PartyService.query(function(data) {
    exampledatatable.add(data.results);
});

[naxmefy]

i did this now and it works

$scope.dtOptions = {};
PartyService.query(function(data) {
    console.log(data);
    $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('aaData', data.results);
});

But i have a new question :D - maybe i generate a ticket later

[l-lin]

Be careful with this. It might have worked because you did not have a large amount of data. So you were "lucky" that the promise was resolved before the DataTable() was called.