This beautiful table seems working as displaying the data correctly... but says no data available in table and search gives no result #1534

pycolle · 2021-04-26T07:30:14Z

pycolle
Apr 26, 2021

Bonjour
First of all I should say your table is beautiful and really great, I like it a lot.
I have one problem with it btu I'm sure I'm doing something stupid on my side.

The table is correctly displaying the data but in the same time it is written below "No data available in table" and when I try to use the search with a word that exist in the records I can see, nothing is displayed.

In attachment my screen shot and my code

Answered by shanmukhateja

May 7, 2021

The answer is at comment:
#1534 (reply in thread)

View full answer

pycolle · 2021-04-26T07:54:42Z

pycolle
Apr 26, 2021
Author

May be this could helps to understand what I'm making wrong using this table.

I realized that it works correctly when I hard code some data in the service which is in charge to retreive the data from table, but did not work anymore when I get these datas from a rest api .. is it an effect of shifting to an observable ?

=========================================
IT WORKS PERFECTLY WHEN I HARD CODE DATA AND DO THIS

Here I hard code some value and I just push them back through the getList function

--------------------------------------------------------------------
CODE OF MY SERVICE IN CHARGE TO RETRIEVE DATAS
----------------------------------------------

m_TheListOfPGWRequestsHardCodedHere: DBDatasRequestInfos[] = 
[
	{_ID: 1, _UUID: 'AAA', _REQUESTOR_OID: 'pyc', _RMIS_OFFICER_OID:null, _DT_REQ:null, _STATUS:'Approved', _EXPLAIN:'azaz', _COMPANY:'modeln', _LOCATION:'Annecy', _DT_GRANTED:null},    
	{_ID: 2, _UUID: 'AAB', _REQUESTOR_OID: 'cg', _RMIS_OFFICER_OID:null, _DT_REQ:null, _STATUS:'On going', _EXPLAIN:'azaz', _COMPANY:'modeln', _LOCATION:'Rousset', _DT_GRANTED:null},    
	{_ID: 2, _UUID: 'ABB', _REQUESTOR_OID: 'cm', _RMIS_OFFICER_OID:null, _DT_REQ:null, _STATUS:'Refused', _EXPLAIN:'azaz', _COMPANY:'modeln', _LOCATION:'Geneva', _DT_GRANTED:null},    
]

getListOfItemsHardCoded()

{
console.log ('PGWService -> getListOfItems()');
console.log ('User EDUID = ' + environment.global_UserEDUIDUniqKey);
console.log ('Secu Officer ? = ' + environment.global_UserIsRMISPerson);
// IMPORTANT : slice will return a new array as a copy of the private array but no the direct object
console.log ('/!\ this method has to be stopped');
return this.m_TheListOfPGWRequestsHardCodedHere.slice();
}

--------------------------------------------------------------------
CODE OF MY COMPONENT
--------------------

ngOnInit(): void 
{
	this.TheListOfPGWRequests = this.ThePGWService.getListOfItemsHardCoded();
	..........
	........................

=========================================
THE DATA ARE STILL DISPLAYED BUT WITH THIS MENTION "NO DATA AVAILABLE IN TABLE" + SEARCH NOT WORK WHEN I DO THIS

--------------------------------------------------------------------
CODE OF MY SERVICE IN CHARGE TO RETRIEVE DATAS
----------------------------------------------

m_TheListOfPGWRequestsInfo : DBDatasRequestInfos[] = []

getListOfItemsFromDB(): Observable <DBDatasRequestInfos[]>

{
console.log ('PGWService -> getListOfItemsFromDB()');
console.log ('User EDUID = ' + environment.global_UserEDUIDUniqKey);
console.log ('Secu Officer ? = ' + environment.global_UserIsRMISPerson);
if (environment.global_UserIsRMISPerson)
{
this.theUrl2Use = this.theURLofMavenWebApp + '/' + 'GetListOfPGWRequests' + '/*' ;
}
else
{
this.theUrl2Use = this.theURLofMavenWebApp + '/' + 'GetListOfPGWRequests' + '/' + environment.global_UserEDUIDUniqKey;
}
console.log ('URL to use = ' + this.theUrl2Use);
return this.http.get<any[]>(this.theUrl2Use).pipe
(
map
(
(result : DBDatasRequestInfos[]) =>
{
console.log ('getListOfItemsFromDB : Result = ');
console.log ('getListOfItemsFromDB : -=-=-=-=-');
console.log ('getListOfItemsFromDB : ', <DBDatasRequestInfos[]>result);
console.log ('getListOfItemsFromDB : -=-=-=-=-');
console.log("getListOfItemsFromDB : Response JSON : " + JSON.stringify(result));
this.m_TheListOfPGWRequestsInfo = <DBDatasRequestInfos[]>result.slice();
return this.m_TheListOfPGWRequestsInfo.slice();
},
(error) =>
{
console.log('getListOfItemsFromDB : ' + error);
}
)
);
}

--------------------------------------------------------------------
CODE OF MY COMPONENT
--------------------

ngOnInit(): void 
{
	this.ThePGWService.getListOfItemsFromDB().subscribe
	(
		(result) => 
		{
			console.log ('PGWList ngOnInit : Result = ');
			console.log ('PGWList ngOnInit : -=-=-=-=-');
			this.TheListOfPGWRequests = result.slice();
			console.log ('PGWList ngOnInit : ', this.TheListOfPGWRequests);
		console.log ('PGWList ngOnInit : -=-=-=-=-')
		}
	)
	..............
	.............................

0 replies

shanmukhateja · 2021-04-28T14:47:30Z

shanmukhateja
Apr 28, 2021
Collaborator

Hi, could you provide a reproducible GitHub repo or StackBlitz link to investigate this?

1 reply

pycolle May 5, 2021
Author

Hello shanmukhateja

To sumarize my long below message : here below you will catch the problem I'm observing, it comes at the moment you get data from a database through an observable in ngInit to populate the table

More detailled now ...

Although I'm an old IT engineer, I'm just a beginner with all this, so I'm not yet sure how I could provide you my code.
However I understood where the issue is located although I'm not yet able to fix it.

Here the trials I did and how I reproduced the problem :
I created a small angular application with 4 pages

page 1 contains just the example we can find here : https://l-lin.github.io/angular-datatables/#/basic/zero-config
page 2 contains instead the data in a variable declared in the associated ts file, this variable being obtained by a direct call to a service (the data beign hardcoded in the service)
page 3 contains the same but instead a direct call it is a call through an observable (the data being still hardcoded in the service)
page 4 contains the same but instead the observable method contains a call to a springboot function which execute a select in a database.

Page 2, 3, 4 HTML code is stritcly the same, only differ the method in the .TS to populate the varaiable

So let's see the result and where it fails

Page 1 works
Page 2 works
Page 3 works
Page 4 .... the data are displayed with also the correct look and feel BUT the table says "No data available in table" and Showing 0 to 0 of 0 entries

What I'm suspecting ... the rendering of the table is done before the data are obtained from the database and hence the table has the "feeling" that there is no data inside ... but when they arrive they are correctly rendered, still the data keep its feeling

If you tell me how I can provide you my code, then for sure you can visualize the problem.

Here the code of the HTML page (2,3,4 are exactly the same)

<table datatable class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of m_DataInPage03 ; let i = index">
      <td>{{i}}</td>
      <td>{{item._FrstName}}</td>
      <td>{{item._LastName}}</td>
    </tr>
  </tbody>
</table>

Here the code of the PAGE 4 .TS

import { Component, OnInit } from "@angular/core";
import { DemoDataStruct } from "../Datas/DemoData";
import { DemoService } from "../service/DemoService";

@Component({
  selector: "app-sdbx-page04",
  templateUrl: "./sdbx-page04.component.html",
  styleUrls: ["./sdbx-page04.component.css"],
})
export class SdbxPage04Component implements OnInit {
  m_DataInPage04: DemoDataStruct[] = [];

  constructor(private TheDemoService: DemoService) {}

  ngOnInit(): void {
    console.log("sdbx-page04 : ngOnInit()");
    this.TheDemoService.getDemoData_return_data_from_aselectçin_DB_through_observable_method().subscribe(
      (result) => {
        console.log("Result = ");
        console.log("-=-=-=-=-");
        this.m_DataInPage04 = result.slice();
        console.log("", this.m_DataInPage04);
        console.log("-=-=-=-=-");
      }
    );
    console.log("Data in page 04", this.m_DataInPage04);
  }
}

Here the code of the .TS service

import { Injectable } from "@angular/core";
import { observable, Observable } from "rxjs";
import { Subject } from "rxjs";
import { EventEmitter } from "@angular/core";
import { of } from "rxjs";
import { map, catchError, tap } from "rxjs/operators";

import { HttpClient, HttpRequest, HttpHeaders } from "@angular/common/http";
import { Router } from "@angular/router";
import { ActivatedRoute } from "@angular/router";

import { DemoDataStruct } from "../Datas/DemoData";
import { IsFocusableConfig } from "@angular/cdk/a11y";

import { environment } from "../../environments/environment";

@Injectable({ providedIn: "root" })
export class DemoService {
  theURLofMavenWebApp: string = environment.MavenDBService + "/pyc/trials";
  theUrl2Use: string;
  m_TheSomeDemoData: DemoDataStruct[] = [
    {
      _ID: 0,
      _FrstName: "Satanas et Diabolo",
      _LastName: "La Démone Double-Zéro Grand Sport",
    },
    { _ID: 1, _FrstName: "Les frères Têtes-dures", _LastName: "La Caraverne " },
    {
      _ID: 2,
      _FrstName: "Pique et Collégramme",
      _LastName: "La Dingo-Limousine",
    },
    {
      _ID: 3,
      _FrstName: "Professeur Maboulette",
      _LastName: "L Auto-aéro-fuseau-planeur",
    },
    { _ID: 4, _FrstName: "Max Le Rouge", _LastName: "Le Bolide Ecarlate" },
    {
      _ID: 5,
      _FrstName: "Pénélope Jolicœur",
      _LastName: "La Compact PussyCat",
    },
    {
      _ID: 6,
      _FrstName: "Sergent Grosse-Pomme et Soldat Petit-Pois",
      _LastName: "Le Tocard Tank",
    },
    {
      _ID: 7,
      _FrstName: "Al Carbone et sa bande",
      _LastName: "La Cavaillac Blindée ",
    },
    {
      _ID: 7,
      _FrstName: "Malabar et Malabille",
      _LastName: "Le Coucou Casse-cou",
    },
    {
      _ID: 7,
      _FrstName: "Pierre de Beau-Fixe ",
      _LastName: "La Turbo Terrific",
    },
    {
      _ID: 7,
      _FrstName: "Rufus-la-Rondelle et son castor Saucisson",
      _LastName: "La Tacot Tout-Terrain",
    },
  ];
  m_TheSomeDemoDataFromDB: DemoDataStruct[] = [];

  constructor(
    private http: HttpClient,
    private route: ActivatedRoute,
    private router: Router
  ) {
    console.log("DemoService -> constructor() ...");
  }

  getDemoData_return_hardcoded_data() {
    console.log("DemoService -> getDemoData_return_hardcoded_data()");
    return this.m_TheSomeDemoData.slice();
  }

  getDemoData_return_hardcoded_data_through_observable_method(): Observable<
    DemoDataStruct[]
  > {
    console.log(
      "DemoService -> getDemoData_return_hardcoded_data_through_observable_method()"
    );
    return of(<DemoDataStruct[]>this.m_TheSomeDemoData.slice());
  }

  getDemoData_return_data_from_aselectçin_DB_through_observable_method(): Observable<
    DemoDataStruct[]
  > {
    console.log(
      "DemoService -> getDemoData_return_data_from_aselectçin_DB_through_observable_method()"
    );
    this.theUrl2Use = this.theURLofMavenWebApp + "/" + "GetAListForTest";
    console.log("URL to use = " + this.theUrl2Use);
    return this.http.get<any[]>(this.theUrl2Use).pipe(
      map(
        (result: DemoDataStruct[]) => {
          console.log("getListOfRequestsFromDB : Result = ");
          console.log("getListOfRequestsFromDB : -=-=-=-=-");
          console.log("getListOfRequestsFromDB : ", <DemoDataStruct[]>result);
          console.log("getListOfRequestsFromDB : -=-=-=-=-");
          console.log(
            "getListOfRequestsFromDB : Response JSON : " +
              JSON.stringify(result)
          );
          this.m_TheSomeDemoDataFromDB = <DemoDataStruct[]>result.slice();
          return this.m_TheSomeDemoDataFromDB.slice();
        },
        (error) => {
          console.log("getListOfRequestsFromDB : " + error);
        }
      )
    );
  }
}

Edit by @shanmukhateja : fix formatting of code blocks

pycolle · 2021-04-28T18:09:58Z

pycolle
Apr 28, 2021
Author

Hello Surya I have absolutely no idea on how to create a GitHub repo or StackBlitz I will do my best to pass you some code which is as simple as possible and that shows the problem. Cordialement PYC Le mer. 28 avr. 2021 à 16:47, Surya Teja K ***@***.***> a écrit :

…

Hi, could you provide a reproducible GitHub repo or StackBlitz link to investigate this? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1534 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACHZ4QUT32TA54EW7U2YNG3TLANZJANCNFSM43SJEV2A> .

-- P-y

3 replies

shanmukhateja May 5, 2021
Collaborator

@pycolle

Hi, I believe this is because the DataTables instance doesn't know that data has changed after your service returns the hardcoded data.

Please refer this example on the documentation.

It makes a HTTP GET request to a server inside datatables' ajax callback.
Then, it calls this.dtTrigger.next() to inform table to re-render the table using the newly found data.

To fix your Page4.ts code:

import { OnInit, Component, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';

// blah blah init code
export class SdbxPage04Component implements OnInit, OnDestroy {
// your array to render data  
m_DataInPage04: DemoDataStruct[] = [];

// new stuff 
dtOptions = {destroy: true};
dtTrigger = new Subject();

Now, in your HTML:

<table datatable class="row-border hover" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
  ...
</table>

Then add the following code below this.m_TheSomeDemoDataFromDB = <DemoDataStruct[]>result.slice();:

this.dtTrigger.next();

You should now see output however if you fail to do so, just follow the documentation in the link.

You can share your code by uploading it's contents as a zip file to file-sharing websites like Dropbox. Keep in mind, we do not recommend this as such links could be removed in the near future.

Visit StackBlitz and choose "Angular". You will be presented with a boilerplate Angular project where you can make your changes to replicate your issue & share the link here.

You might need to sign into GitHub account inside StackBlitz for the link to persist though

Edit: fixed code

pycolle May 7, 2021
Author

WHAOOOOOOO !!!!
You are hyper mega genial !!!!
It works.
Effectively now there is no more these no data, and also the search, the pages works
Also thanks a lot for the advise on StackBlitz

A BIG BIG BIG THANKS
By the way this table is wonderful

pycolle May 7, 2021
Author

A very wise lessons of Angular by the way and all the power of the management through events

shanmukhateja · 2021-05-07T05:57:39Z

shanmukhateja
May 7, 2021
Collaborator

The answer is at comment:
#1534 (reply in thread)

1 reply

pycolle May 7, 2021
Author

I'm still a newbies in Angular but I wish to create beautiful application ... do let me know if you have some other beautiful components that are open source ...
BTW may be you have some ideas here
I'm searching a super timeline which could allow to display horizontally a large number of informations
this could be extremely useful for exemple in the 8D method when you want to visualize all what happens and resulted into an incident ...
I found one day this one : but I'm not so sure it can be integrated into an Angular project
http://www.simile-widgets.org/timeline/
There are interresting things on it even if it is not exactly what I was thinking
for exemple in 8D method we should clearly see in 2 differents manner (may be colors or place) the events / information obtained at a certain moment and the actions by humans
May be we could collaborate here.

Waiting that
Thanks again
You made my day !

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

This beautiful table seems working as displaying the data correctly... but says no data available in table and search gives no result #1534

{{title}}

Replies: 4 comments 5 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

This beautiful table seems working as displaying the data correctly... but says no data available in table and search gives no result #1534

pycolle Apr 26, 2021

Replies: 4 comments · 5 replies

pycolle Apr 26, 2021 Author

========================================= IT WORKS PERFECTLY WHEN I HARD CODE DATA AND DO THIS

========================================= THE DATA ARE STILL DISPLAYED BUT WITH THIS MENTION "NO DATA AVAILABLE IN TABLE" + SEARCH NOT WORK WHEN I DO THIS

shanmukhateja Apr 28, 2021 Collaborator

pycolle May 5, 2021 Author

pycolle Apr 28, 2021 Author

shanmukhateja May 5, 2021 Collaborator

pycolle May 7, 2021 Author

pycolle May 7, 2021 Author

shanmukhateja May 7, 2021 Collaborator

pycolle May 7, 2021 Author

pycolle
Apr 26, 2021

Replies: 4 comments 5 replies

pycolle
Apr 26, 2021
Author

=========================================
IT WORKS PERFECTLY WHEN I HARD CODE DATA AND DO THIS

=========================================
THE DATA ARE STILL DISPLAYED BUT WITH THIS MENTION "NO DATA AVAILABLE IN TABLE" + SEARCH NOT WORK WHEN I DO THIS

shanmukhateja
Apr 28, 2021
Collaborator

pycolle May 5, 2021
Author

pycolle
Apr 28, 2021
Author

shanmukhateja May 5, 2021
Collaborator

pycolle May 7, 2021
Author

pycolle May 7, 2021
Author

shanmukhateja
May 7, 2021
Collaborator

pycolle May 7, 2021
Author