Datatable is not generating after call function in angular js

Question

I am displaying data in datatable. So when I land on the page without function call than it is working but when I want to generate datatable after calling function than it is not working.

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 DATA:

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

Datatable working fine without function call. If I will not use function tableCall then datatable is generating.

Like below 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>

Controller

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','-'),
          ];

This code is working and generating datatable, But I want to implement datatable after call the function.

Windward

Did you try to initialized this.standardOptions at controller build time as : this.standardOptions = {}. Is for keep a reference for datatable mapping. try to put it at the beggining of your controller – Deleterious

And to keep reference update your function like : $scope.tableCall=function(){ angular.extend(this.standardOptions, DTOptionsBuilder... – Deleterious

@Silvinus. thanks for commenting. Could you provide sample code as a answer. – Windward

Answer 1

Try to initialized this.standardOptions at the begining

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','-'),
  ];
}

Another things seems strange. standardOptions is defined on this but tableCall function is defined on $scope. In your DOM, do you use ng-controller with 'as' keyword ? Check if you should use $scope or this. I think there is a mistake here.

Deleterious