This repository was archived by the owner on Feb 2, 2025. It is now read-only.
This repository was archived by the owner on Feb 2, 2025. It is now read-only.
Pagination controls disappear after reloadData #549
Closed
Description
After calling reloadData() on the dtInstance, the table updates with the new data but the paging controls get removed.
And then after call to realodData():
module GoldenCatWebClient.SideNavigation.Newsletters {
export class NewsletterController {
private _newsletterHub: DataAccess.NewsletterHub;
private _newsletters: any[] = [];
static $inject = ['$scope', '$q', 'DTOptionsBuilder', 'DTColumnBuilder', 'hubService'];
constructor(private $scope, private $q, private DTOptionsBuilder, private DTColumnBuilder, private hubService: GoldenCatWebClient.DataAccess.HubService) {
$scope.vm = this;
$scope.vm.dtInstance = {};
this._newsletterHub = hubService.getNewsletterHub();
this._newsletterHub.registerOnBroadcastNewsletterInsertedEvent((data) => {
this.onBroadcastNewsletterInsertedEvent(data);
});
this.$scope.vm.dtColumns = [
this.DTColumnBuilder.newColumn('Symbol').withTitle('Symbol'),
this.DTColumnBuilder.newColumn('PromoterName').withTitle('Promoter')
];
this.$scope.vm.dtOptions = this.DTOptionsBuilder.fromFnPromise(() => {
return this.getDataPromise();
});
}
private onBroadcastNewsletterInsertedEvent = (newsletter: GoldenCatWebClient.Models.Newsletter) => {
console.debug('Newsletter controller recieved newsletter inserted event: \'' + newsletter.toString() + '\' from server.');
this._newsletters.push(newsletter);
this.$scope.vm.dtInstance.reloadData();
}
private getInstance = (dtInstance: any) => {
this.$scope.vm.dtInstance = dtInstance;
}
private getDataPromise = () => {
var deferred = this.$q.defer();
deferred.resolve(this._newsletters);
return deferred.promise;
}
}
}
The data is realoaded in the function 'onBroadcastNewsletterInsertedEvent'. The controls stay in place when I call rerender() instead, but I don't want to rerender() the table since it flickers and this table will be reloaded many times - hence too much flickering when calling rerender().
Here is HTML:
<div class="wrapper wrapper-content">
<div class="row">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Newsletters</h5>
<div ibox-tools></div>
</div>
<div class="ibox-content">
<table datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" dt-instance="vm.getInstance" class="table table-striped table-bordered table-hover"></table>
</div>
</div>
</div>
</div>
</div>
</div>