Usage with Restangular

[antonyjsmith]

Hi, does anyone know which helper I would use to get data from Restangular? I assumed it would work exactly the same as the fnPromise example however it would appear not! Any thoughts or examples would be much appreciated.

Thanks

[l-lin]

It should work with DTOption.withFnPromise function.
Here a snippet:

angular.module('datatablesSampleApp')
.controller('withPromiseCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder, Restangular) {
    $scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
        return Restangular.all('data').getList();
    }).withPaginationType('full_numbers');
    $scope.dtColumns = [...];
    ...
});

[antonyjsmith]

Thanks for this, I have notifications switched off and didn't realise you'd responded so quick!

The solution kind of works but the response is returned as the value of an object called 'records' and the main issue is I'm not sure how to access the array within it using this method. So whilst it loads the tables has no data.

Thanks

[l-lin]

Then you need to wrap it to another promise using $q. For example:

angular.module('datatablesSampleApp')
.controller('withPromiseCtrl', function ($q, $scope, DTOptionsBuilder, DTColumnBuilder, Restangular) {
    $scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
        var defer = $q.defer();
        Restangular.all('data').get().then(function(result) {
            // Suppose your data is nested in the "data" attribute of your response
            defer.resolve(result.data);
        });
        return defer.promise;
    }).withPaginationType('full_numbers');
    $scope.dtColumns = [...];
    ...
});

However, in the version that will come, I just implemented the feature #111 that will permit you to set a dataProp in order to define where your data is stored. So with the newest version of angular-datatables (no stable version yet), the code will look like this:

angular.module('datatablesSampleApp')
.controller('withPromiseCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder, Restangular) {
    $scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
        return Restangular.all('data').getList();
    })
    .withDataProp('data') // If your data is nested in the "data" attribute
    .withPaginationType('full_numbers');
    $scope.dtColumns = [...];
    ...
});

[antonyjsmith]

I've actually just cracked it with a similar solution to your first option :) so this worked for me:

return Restangular.all('data').get().then(function(result) { return result.records; });

I'll keep an eye out for the next stable version. Thanks again for the help! 👍

[tssa88]

How can I use server side pagination with Restangular? When I enable "withOption('serverSide', true)", Datatables will call the API twice: A regular call and a datatables call passing datatables values but without the route "api/clientes".

https://s31.postimg.org/xz3v7q9bf/datatables.jpg

I'm trying this code but with no success. How can I solve this?

var getTableData = function () {
            var defer = $q.defer();
            RestangularAuth.all('clientes').getList().then(function (result) {
                defer.resolve(result.data);
            });
            return defer.promise;
        };


            vm.dtOptions = DTOptionsBuilder.fromFnPromise(getTableData())
                //.withOption('serverSide', true)
                .withPaginationType('full_numbers');

[suricactus]

@thiagosoeiro Have you found a solution?
edit:
I have found a solutions. Use ajax option as function.

DTOptionsBuilder
    .newOptions()
    .withOption('ajax', function(data, callback, settings) {
      const Resource = Restangular.all('clientes');
      const req = Resource.getList()
        .then(function(resp) {
          callback(resp.data);
        });
    });

[silverbux]

Hi, i was wondering if anyone tried having it with a server side pagination?

[suricactus]

Yes, I did. There is an example code from my current project:

function dataTablesAjax(data, callback, settings) {
    // Build current restangular resource
    const Resource = Restangular.all(config.resourceName);
    // Maximum limit of results
    const limit = data.length;
    // OrderBy columns - hash of two itemed arrays
    const orderBy = data.order.map((i) => [settings.aoColumns[i.column].mData, i.dir]);
    // Search term
    const qTerm = data.search;
    const req = Resource.getList({
      limit: limit,
      orderBy: orderBy,
      q: qTerm.value,
      offset: data.start,
    })
      .then(function(resp) {
        callback({
          draw: undefined,
          recordsTotal: resp.totalItems,
          recordsFiltered: resp.filteredItems,
          data: resp,
        });
      });

    return req;
  }

[hbcrhythm]

if anyone tried to refresh table data ?