Datatable ne génère pas de fonction après appel dans l'angle js

Question

J'affiche des données dans datatable. Donc, quand je atterris sur la page sans appel de fonction que cela fonctionne, mais quand je veux générer datatable après l'appel de la fonction que cela ne fonctionne pas.

HTML:

   <div class="widget-body no-padding"> 
       <table datatable dt-options="datatables.standardOptions" dt-columns="datatables.standardColumns" class="table table-striped table-bordered table-hover" width="100%"> 
       <thead> 
        <tr> 
        <th>Name</th> 
        <th>Age</th> 
        <th>Section</th> 
        <th>Gender</th>      
        </tr> 
       </thead> 
       </table> 
      </div> 
      <div class="text-center margin-top-10 margin-bottom-10"> 
      <button class="btn btn-xs btn-primary" ng- 
       click="tableCall();">Apply</button> 
      </div> 

Controller:

$scope.tableCall=function(){ 
    this.standardOptions = DTOptionsBuilder 
     .fromFnPromise(call.all('------API----------').getList()) 
     .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" + 
     "t" + 
     "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>") 
     .withBootstrap(); 
    this.standardColumns = [ 
     DTColumnBuilder.newColumn('name').withOption('defaultContent','-'), 
     DTColumnBuilder.newColumn('age').withOption('defaultContent','-'), 
     DTColumnBuilder.newColumn('section').withOption('defaultContent','-'), 
     DTColumnBuilder.newColumn('gender').withOption('defaultContent','-'), 
     ]; 
} 

JSON DONNÉES:

[ 
{ 
name: "thomus", 
age: 27, 
section:"K", 
gender:"M" 
}, 
{ 
name: "Roy", 
age: 67, 
section:"m", 
gender:"F" 
}, 
{ 
name: "Keni", 
age: 34, 
section:"L", 
gender:"F" 
} 
] 

bel esprit de travail Datatable appel de fonction hout. Si je ne vais pas utiliser la fonction tableCall alors la donnée est en train de générer.

Comme ci-dessous le code:

HTML

<div class="widget-body no-padding"> 
       <table datatable dt-options="datatables.standardOptions" dt-columns="datatables.standardColumns" class="table table-striped table-bordered table-hover" width="100%"> 
       <thead> 
        <tr> 
        <th>Name</th> 
        <th>Age</th> 
        <th>Section</th> 
        <th>Gender</th>      
        </tr> 
       </thead> 
       </table> 
      </div> 

Contrôleur

this.standardOptions = DTOptionsBuilder 
      .fromFnPromise(call.all('------API----------').getList()) 
      .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" + 
      "t" + 
      "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>") 
      .withBootstrap(); 
     this.standardColumns = [ 
      DTColumnBuilder.newColumn('name').withOption('defaultContent','-'), 
      DTColumnBuilder.newColumn('age').withOption('defaultContent','-'), 
      DTColumnBuilder.newColumn('section').withOption('defaultContent','-'), 
      DTColumnBuilder.newColumn('gender').withOption('defaultContent','-'), 
      ]; 

Ce code fonctionne et générer datatable, mais je veux mettre en œuvre datatable après appel de la fonction .

Answer 1

Essayez de this.standardOptions initialisées au début

this.standardOptions = {}; 
$scope.tableCall=function(){ 
    angular.extend(this.standardOptions, DTOptionsBuilder 
    .fromFnPromise(call.all('------API----------').getList()) 
    .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" + 
    "t" + 
    "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>") 
    .withBootstrap()); 
this.standardColumns = [ 
    DTColumnBuilder.newColumn('name').withOption('defaultContent','-'), 
    DTColumnBuilder.newColumn('age').withOption('defaultContent','-'), 
    DTColumnBuilder.newColumn('section').withOption('defaultContent','-'), 
    DTColumnBuilder.newColumn('gender').withOption('defaultContent','-'), 
    ]; 
} 

Une autre chose semble étrange. standardOptions est défini à ce sujet mais la fonction tableCall est définie sur $ scope. Dans votre DOM, utilisez-vous ng-controller avec le mot clé 'as'? Vérifiez si vous devez utiliser $ scope ou this. Je pense qu'il y a une erreur ici.