Using datatables with Angular + jquerie

leoakino

Hello experts,

I´m using datatables with angular + jquerie. My problem is: after put the code into document.ready.function my front end doesent know the exactly moment that the datas were loaded. I have seen the is a serverside parameter but isnt applicable in my case (beasue i´m not using php or another language to put the back end url). To make a workaround i´m using a timesleep but it isn´t trust because my back end is some cases may respond after 3 seconds. Follow below my code

ngAfterViewInit() {         
        var $  = require( 'jquery' );  
        $(document).ready(function () {
           
            setTimeout(function() {
                $('#fileList').DataTable({
                    order: [[3, 'desc']],
                    lengthMenu: [
                        [5, 20, 50, -1],
                        [5, 20, 50, 'All'],
                    ]
                });
           }, 3000);   
          
        });   

 }

kthorngren

Looks like you are loading the data into a DOM sourced table. In this case Datatbles is not involved with the initial loading of the table so it won't know when the loading is complete. I'm not familiar with Laravel nor how you are initially loading the table. You will need to review the docs for the process you are using to find any callbacks that can be used or other methods to know when the table is loaded.

Kevin

leoakino

Thank you for the reply Kevin,

Yeah, i´m studying a lot the documention.. Trying to make some control in the subscribe return too

 ngOnInit() {
        
          this.userService.getAll()
            .pipe(first())
            .subscribe(users => this.users = users);
       
            
    }

leoakino

Solved my problem adding the method add on subscribe. This method is called when subscribe is complete. Just add 0,5s of timeout to guarantee the function gonna be called after the subscrive is complete

'''
ngOnInit() {

    var $  = require( 'jquery' );

      this.userService.getAll()
        .pipe(first())
        .subscribe(users => this.users = users).add(() => {
            setTimeout(function() {
                $('#fileList').DataTable({
                    order: [[3, 'desc']],
                    lengthMenu: [
                        [5, 20, 50, -1],
                        [5, 20, 50, 'All'],
                    ]
                });
           }, 500); 
       });     

}

'''