Skip to content
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
@typescripter

Description

@typescripter

After calling reloadData() on the dtInstance, the table updates with the new data but the paging controls get removed.

datatables_1

And then after call to realodData():

datatables_2

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions