Using a factory as source data in angular-datatables doesn't work

Question

It's possible to use a factory as source data in angular-datatables?

Basically, I wish to return data in a variable and use it as source data.

UPDATED (06/22/2016)

Now this is my factory:

statisticsModule.factory('globalFactory', function($rootScope, $http){

  var globalFactory = {};

  globalFactory.getUrl = function(){
    return $http.get('../statistics/php/config_statistics.json');
  };

  return globalFactory;

});

And this is my Controller

statisticsModule.controller("dataController", dataController); //Fin controlador

  function dataController($scope, $http, globalFactory, DTOptionsBuilder, DTColumnBuilder){
    //Promise con el factory
    globalFactory.getUrl().then(function(response){

      //Obtener data
      var urlGlobal = response.data;
      //Filtrar data. arrayReportBD : Arreglo con las URL de los reportes
      var deserialize = angular.fromJson(urlGlobal.config.graph_conf_array.arrayReportBD);
      //Data Distribución de Estatus
      var urlStatus = deserialize[0];

      //Obtener data de Distribución de Estatus
      $http.get(urlStatus).success(function(data){

      console.log(data);

      var vm = this;
      vm.dtOptions = DTOptionsBuilder.fromSource(data)
      .withDOM('lfrtip')
      .withPaginationType('full_numbers')
      .withLanguage({
        "sEmptyTable":     "No hay datos para cargar en la tabla",
        "sInfo":           "Mostrando _START_ de _END_ de _TOTAL_ entradas",
        "sInfoEmpty":      "Mostrando 0 de 0 de 0 entradas",
        "sInfoFiltered":   "(filtradas _MAX_ entradas totales)",
        "sInfoPostFix":    "",
        "sInfoThousands":  ",",
        "sLengthMenu":     "Mostrar _MENU_ entradas",
        "sLoadingRecords": "Cargando...",
        "sProcessing":     "Procesando...",
        "sSearch":         "Buscar:",
        "sZeroRecords":    "No se encontraron registros",
        "oPaginate": {
            "sFirst":    "Primera",
            "sLast":     "Última",
            "sNext":     "Siguiente",
            "sPrevious": "Anterior"
          },
          "oAria": {
            "sSortAscending":  ": activar para ordenar de forma ascendente",
            "sSortDescending": ": activar para ordenar de forma descendente"
          }
        });
        vm.dtColumns = [
          DTColumnBuilder.newColumn('gob_code').withTitle('Cód. Gob.'),
          DTColumnBuilder.newColumn('fci_code').withTitle('Cód. FCI'),
          DTColumnBuilder.newColumn('name').withTitle('NOMBRE'),
          DTColumnBuilder.newColumn('status').withTitle('ESTATUS')
        ];

      }).error(function(err){

      });//Fin $http

    });//Fin promise

  }//Fin función

P.D.:

I've datatables-scripts in correct position, indeed, if I use the data from a direct URL as source the view loads perfectly.
I've already added the ng-app in html tag
I want that the function to build datatables use data filtered

Ulises Vargas De Sousa · Accepted Answer · 2016-06-23 13:59:59Z

**SOLVED 06/23/2015**

It was hard, but finally I could solve it!

STEP ONE: CREATE MODULE:

var statisticsModule = angular.module("statisticsModule", ['datatables', 'datatables.bootstrap']);

//Bootstrap was added for best views

STEP TWO: CREATE FACTORY

statisticsModule.factory('globalFactory', function($rootScope, $http){

  var globalFactory = {};

  globalFactory.getUrl = function(){
    return $http.get('../statistics/php/reports/r_reports_status.php').success(function(data){
      });
  };

  return globalFactory;

});

//Factory pointing to specific URL that contains the data

STEP THREE: CREATE CONTROLLER

statisticsModule.controller("dataController", dataController);

  function dataController(DTOptionsBuilder, DTColumnBuilder, $scope, globalFactory){


      var vm = this;
      //Return data from factory
      vm.dtOptions = DTOptionsBuilder.fromFnPromise(function(){
        return globalFactory.getUrl().then(function(response){
          return response.data;
        })
      })
      .withDOM('lfrtip')
      .withPaginationType('full_numbers')
      //Language Spanish (optional)
      .withLanguage({
        "sEmptyTable":     "No hay datos para cargar en la tabla",
        "sInfo":           "Mostrando _START_ de _END_ de _TOTAL_ entradas",
        "sInfoEmpty":      "Mostrando 0 de 0 de 0 entradas",
        "sInfoFiltered":   "(filtradas _MAX_ entradas totales)",
        "sInfoPostFix":    "",
        "sInfoThousands":  ",",
        "sLengthMenu":     "Mostrar _MENU_ entradas",
        "sLoadingRecords": "Cargando...",
        "sProcessing":     "Procesando...",
        "sSearch":         "Buscar:",
        "sZeroRecords":    "No se encontraron registros",
        "oPaginate": {
            "sFirst":    "Primera",
            "sLast":     "Última",
            "sNext":     "Siguiente",
            "sPrevious": "Anterior"
          },
          "oAria": {
            "sSortAscending":  ": activar para ordenar de forma ascendente",
            "sSortDescending": ": activar para ordenar de forma descendente"
          }
        })
        //More options for best views
        .withDisplayLength(1)
        .withOption('responsive', true)
        .withBootstrap();
    //BELOW GOES vm.dtColumns and } that ends the function

AND FINALLY, STEP FOUR: PUT INTO VIEW

<!--THIS IS THE ORDER-->

<head>
  
  <!--JQUERY SCRIPT-->
  <!--JQUERY DATATABLES SCRIPT-->
  <!--ANGULAR SCRIPT-->
  <!--ANGULAR DATATABLE SCRIPT-->
  <!--ANGULAR DATATABLE CSS-->
  <!--DATATABLES BOOTSTRAP CSS-->
  <!--DATATABLES RESPONSIVE CSS-->
  <!--MODULE-->
  <!--CONTROLLER-->
  <!--FACTORY-->
  <!--ANGULAR DATATABLES BOOTSTRAP SCRIPT-->
  <!--BOOTSTRAP SCRIPT-->
  
</head>

<body>
  
  <div ng-controller="dataController as showCase">
    <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="table table-striped table-bordered"></table>
  </div>
  
  <!--DATATABLES RESPONSIVE SCRIPT-->
  
</body>

codeandcloud · Accepted Answer · 2016-06-22 14:36:43Z

0

The code should be more like this.
Factory

statisticsModule.factory('globalFactory', ['$http', function ($http) {
    var GetStatistics = function () {
        return $http.get('../statistics/php/config_statistics.json');
    };
    return {
        GetStatistics: GetStatistics
    }
}]);

Controller

statisticsModule.controller("tableController", ['globalFactory', '$http',
    function (globalFactory, $http) {
    //.success is obsolete.
    globalFactory.GetStatistics().then(function (response) {
         //success
         // Initialize DataTable here
    }, function (response) {
        //fail
        //alert(response.data);
    });
}]);

In my attempt, the console throws me an error: [ng-areq] statusController not a function got undefined

Don't understand why you are passing statusController as an argument while registering the controller. Remove that.

Update

You can also use service

statisticsModule.service('globalService', ['$http', function ($http) {
    this.GetStatistics = function () {
        return $http.get('../statistics/php/config_statistics.json');
    };
}]);

And call it in controller like

globalService.GetStatistics().then(function (response) {
  //success
  // Initialize DataTable here
}, function (response) {
  //fail
  //alert(response.data);
});

edited Jun 22, 2016 at 14:36

answered Jun 22, 2016 at 14:09

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

4 Comments

Ulises Vargas De Sousa Over a year ago

In the Controller I should code the datatable inside the globalFactory.GetStatistics.then? Forgive my ignorance

codeandcloud Over a year ago

yes. in globalFactory you are creating a method called GetStatistics and returning it. So we use globalFactory.GetStatistics. you can also use service

Ulises Vargas De Sousa Over a year ago

Show me an error by console: Error: globalFactory.GetStatistics.then is not a function

codeandcloud Over a year ago

type.updated code. globalFactory.GetStatistics().then

Collectives™ on Stack Overflow

Using a factory as source data in angular-datatables doesn't work

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related