Pagination controls disappear after reloadData

[typescripter]

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>

[typescripter]

It appears the pagination controls are being removed when the hideloading($elem) function is being called in angular-datatables.renderer.js line 34.

    function hideLoading($elem) {
        $elem.show();
        $elem.next().remove();
    }

I tried commenting out $elem.next().remove(); and this keeps the pagination controls in place but then the "loading..." message stays indefinitely.

[JosephGarrone]

Any chance you can chuck up a Plunkr to make it easier to debug?

[typescripter]

Only way I know how to fix this is to find and remove the loading element explicitly:

    function hideLoading($elem) {
        $elem.show();
        $('h3.dt-loading').remove();
        //$elem.next().remove();
    }

The loading template was found in angular-datatables.options.js

function dtDefaultOptions() {
    var options = {
        loadingTemplate: '<h3 class="dt-loading">Loading...</h3>',
        bootstrapOptions: {},
        setLoadingTemplate: setLoadingTemplate,
        setLanguageSource: setLanguageSource,
        setLanguage: setLanguage,
        setDisplayLength: setDisplayLength,
        setBootstrapOptions: setBootstrapOptions
    };

[stefensuhat]

It appear at the example site too

http://l-lin.github.io/angular-datatables/#/dataReloadWithPromise

after reload twice the pagination is gone.

+1. I'm experiencing the issue too. Right now I'm using re-render instead of reload. Well it's not a good one but better than nothing.

[chapeti]

+1. I'm experiencing the issue too.

[cyberdemon8]

+1. I'm experiencing the issue too.

[jmelosegui]

I should read this first before open #557. I will close that one now.

+1 to get this fixed.

[jmelosegui]

I have created a plunker showing this issue.

[jmelosegui]

@ssuhat, rerender is not working either. See #563 for more info.

Do you have any other advice?

[jmelosegui]

CC @cbarest

[jmelosegui]

@l-lin, I think this one is important enough to be under milestone 0.5.3.

[HeyChristian]

+1. I'm experiencing the issue too.

[l-lin]

As @typescripter has said, the issue comes from the code $elem.next().remove() which does not check if the next element of the table is indeed the loading image.

One solution was to wrap the loading message with a <div class="dt-loading"> and remove the next element only if the next element has the class dt-loading.