When I load the page without calling a function, the data is displayed in a datatable perfectly fine. However, if I try to generate the datatable after calling a function, it does not work.
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"
}
]
The datatable functions properly without the need for the tableCall function. It generates as expected without any issues.
See 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','-'),
];
The above code successfully generates the datatable, but my requirement is to implement the datatable functionality after calling the designated function.