[PHP/HTML] Forcer l'affichage progressif de grandes tables sous IE?

Forcer l'affichage progressif de grandes tables sous IE? [PHP/HTML] - PHP - Programmation

Marsh Posté le 23-04-2007 à 12:17:08    

Salut,
 
J'ai hésité à poster cette question sous la rubrique HTML, mais j'ai finalement décidé de la poster ici, sous PHP.
 
Voilà,
 
Je dois afficher, depuis mon serveur, une grosse table (une dizaine de colonnes, et un millier de lignes).
 
Le problème, c'est que même si les données, bien que volumineuses, arrivent vite sur le browser client, IE met un temps fou à afficher la table. Il semble que IE cherche à avoir toutes les données, pour calculer les largeurs de colonnes adéquates et finales, avant d'afficher la table.
 
J'ai pensé à faire un flush() depuis le serveur (avec un ob_end_flush() préalable si nécessaire), tous les 10 enregistrements par exemple, mais sans succès.
 
Au contraire, sous Firefox, la table s'affiche petit à petit, avec un recalcul dynamique des largeurs de colonnes, au fur et à mesure que les colonnes sont affichées.
L'affichage des premières lignes est donc rapide.
 
J'aimerais savoir si j'ai la possibilité de forcer la même chose sous IE?
 
Je précise que je ne souhaite pas utiliser de colonnes à largeur fixe.
 
Merci.

Reply

Marsh Posté le 23-04-2007 à 12:17:08   

Reply

Marsh Posté le 23-04-2007 à 15:50:33    

Déjà utilise le tampon de sortie ob_ sur toute la page, tu gagneras surement du temps.
 
Je pense que c'est le comportement du cache de IE.
 
Allège au max ton fichier, sépare le js et les css dans des fichiers séparés pour alléger au max le poids de la page :)

Reply

Marsh Posté le 23-04-2007 à 16:33:26    

Bah justement, si j'utilise le tampon de sortie, alors, les utilisateurs ne verront jamais le début des données avant que toute la table soit envoyée, et c'est justement ce que je voudrais obtenir: comme il y a beaucoup de données, (et que les choses peuvent être longues à générer), je veux que le sutilisateurs puissent consulter le début des données.
Vraiment, il semble qu'il ne s'agisse aps du fait que la page soit trop lourde, mais pkutot du fait que j'utilise une table.
En effet, si j'envoie les même données, mais avec un affichage ligne par ligne (au lieu d'utiliser des tables), alors je suis en mesure d'activer l'affichage toutes les dix lignes par exemple, grâce à un flush.
 
Donc, ici, il s'agit vraiment d'IE qui souhaite cacher toutes les données avant d'afficher la table.
Une autre preuve est PHPMyAdmin: sous IE, lorsq u'on lui demande d'afficher 1000 lignes d'une table, l'affichage se fait d'un coup, mais après de nombreuses secondes... Sous FF, au contraire, la table s'affiche progressivement...
 
 

Reply

Marsh Posté le 23-04-2007 à 17:01:18    

C'est le fonctionnement normal d'IE et il n'y a pas moyen d'éviter ça sans séparer la grosse table en beaucoup de petite tables (solution trés crades d'un point de vue sémantique) et sans utiliser de javascript (si tu demandes à un script javascript de récupérer les données par lot, tu pourras la remplir au fur et à mesure ... mais celui qui n'a pas javascript d'activé n'aura rien) ce qui est tout aussi crade mais d'un point de vue fonctionnel ce coup ci.

Reply

Marsh Posté le 23-04-2007 à 17:25:35    

D'accord, c'est donc bien, comme je tendais à le supposer de plus en pls, le fonctionnement normal d'IE.
 
Arf, effectivement, partir d'une petite table, et rajouter des enregistrements à la volée avec manipulation d'InnerHTML, ça devrait pouvoir le faire.
 
Ca ne me plait pas trop trop (je n'aime pas trop utiliser JS pour des opérations lourdes), mais bon, c'est bien de savoir que cette alternative existe.
 
Mais là, pour le coup, avant que le script JS ne soit exécuté, il va falloir que toutes les données soient rapatriées je suppose...?
 
Je crois que le mieux va encore être d'utiliser un système de pagination, mêm es'il est des fois pratique de tout avoir sur une seule page.

Reply

Marsh Posté le 23-04-2007 à 17:27:04    

omega2 a écrit :

l n'y a pas moyen d'éviter ça sans séparer la grosse table en beaucoup de petite tables (solution trés crades d'un point de vue sémantique)


 
 
Ah oui, et je voulais ajouter qu'utiliserdes petites tables ne répond pas au besoin, car à ce moment là, les tables n'auront pas toute la même largeur...ce qui n'est ni visuellement plaisant, ni pratique.

Reply

Marsh Posté le 23-04-2007 à 18:02:08    

et pourquoi ne pas figer la largeur des colonnes ?
 
et si vraiment ça ne vas pas, tu peux recréer des styles que tu appliquerais à tes colonnes/lignes pour faire apparaitre des séparateurs (de lignes et colonnes)... (CSS pure) auquel cas, tu n'as plus à utiliser de tableau...
 
Bon c'est pas la solution le plus pratique, mais ça te permettras de faire ce que tu veux.

Reply

Marsh Posté le 23-04-2007 à 18:09:42    

et pourquoi ne pas afficher ta grosse table dans un tableau paginé (cf utilisation de limit)? c'est quand même mieux :/

Reply

Marsh Posté le 23-04-2007 à 18:11:48    

chani_t a écrit :

et pourquoi ne pas figer la largeur des colonnes ?


 
Je veux bien, mais comment pourrais je connaitre à l'avance la largeur maximale de chaque colonne? Surtout dans mon cas, avec des centaines d'enregistrements, il est très facile/robable que l'un d'entre eux ait une largeur que je n'aurais pas prévu (insécable)
 

chani_t a écrit :


 
et si vraiment ça ne vas pas, tu peux recréer des styles que tu appliquerais à tes colonnes/lignes pour faire apparaitre des séparateurs (de lignes et colonnes)... (CSS pure) auquel cas, tu n'as plus à utiliser de tableau...
Bon c'est pas la solution le plus pratique, mais ça te permettras de faire ce que tu veux.


 
Je ne suis pas certain d'avoir compris où tu veux en venir ici?
Afficher des données tabulaires en pur CSS, je ne vois pas comment faire.
A moins de créer des blocs colonne flottant, et venant s'empiler les uns derrière les autres.
Mais cette solution ne me plait pas, car elle nécessite de traiter les données de l colonne 1, puis de la colonne 2, etc... Donc, d'un point de vue génération de code, avec PH, de faire des mises en tampon énorme.
 
Enfin, ça ne me permettra pas de résoudre mon problème, qui est d'afficher des blocs de lignes les uns après les autres.

Reply

Marsh Posté le 23-04-2007 à 18:12:42    

Yoyo@ a écrit :

D'accord, c'est donc bien, comme je tendais à le supposer de plus en pls, le fonctionnement normal d'IE.
 
Arf, effectivement, partir d'une petite table, et rajouter des enregistrements à la volée avec manipulation d'InnerHTML, ça devrait pouvoir le faire.
 
Ca ne me plait pas trop trop (je n'aime pas trop utiliser JS pour des opérations lourdes), mais bon, c'est bien de savoir que cette alternative existe.
 
Mais là, pour le coup, avant que le script JS ne soit exécuté, il va falloir que toutes les données soient rapatriées je suppose...?
 
Je crois que le mieux va encore être d'utiliser un système de pagination, mêm es'il est des fois pratique de tout avoir sur une seule page.


IE n'affiche pas les tables dynamiquement comme le font Firefox ou Opera. Une solution "serait" d'utiliser Ajax pour manipuler la table et ajouter des lignes par 100, ce qui devrait répondre à une demande utilisateur puisqu'il doit commencer par scroller les 100 lignes pour vérifier l'info. Dans tous les cas un roller "patientez" sera d'une grande utilité, dans la mesure ou on ne laisse pas l'user devant une feuille blanche.


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 23-04-2007 à 18:12:42   

Reply

Marsh Posté le 23-04-2007 à 18:13:40    

rufo a écrit :

et pourquoi ne pas afficher ta grosse table dans un tableau paginé (cf utilisation de limit)? c'est quand même mieux :/


 
Bah oui, comme je le dis, c'est ce que je me suis résolu à faire (je parlais de système de pagination)
 
Mais quand même, je me demandais si mon problème avait une solution. (même en local, où la vitesse de transmission de données n'est pas un problèmes, le stables mettent longtemps à s'afficher)

Reply

Marsh Posté le 23-04-2007 à 18:18:03    

Shinuza a écrit :

IE n'affiche pas les tables dynamiquement comme le font Firefox ou Opera. Une solution "serait" d'utiliser Ajax pour manipuler la table et ajouter des lignes par 100, ce qui devrait répondre à une demande utilisateur puisqu'il doit commencer par scroller les 100 lignes pour vérifier l'info. Dans tous les cas un roller "patientez" sera d'une grande utilité, dans la mesure ou on ne laisse pas l'user devant une feuille blanche.


 
Oui!
 
Je n'ai jamais fait d'Ajax, mais j'ai pensé à ça.
 
Finalement, j'imagine que ça correspond à uune solution Javascript qui irait chercher les données petit à petit.
 
En fait, je suis tellement habitué à FF que j'ai été surpris ce matin en testant le truc avec IE, et voir ma table apparaître d'un coup. J'aurais imaginé qu'il existe une balise CSS pour changer ça, mais a priori...non!

Reply

Marsh Posté le 23-04-2007 à 18:48:48    

Non c'est lié au moteur de rendu d'IEx(7?).
Ajax (Asynchronous JavaScript and XML) comme son nom l'indique va chercher des infos de manière asynchrone par rapport à la vue utilisateur.
A mon avis c'est pas vraiment difficile à faire, 30 minutes de boulot en connaissant un minimum ajax, et du coup j'aurais plus utilisé le dom que InnerHTML, mais bon :D


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 23-04-2007 à 23:26:59    

Shinuza a écrit :

Non c'est lié au moteur de rendu d'IEx(7?).
Ajax (Asynchronous JavaScript and XML) comme son nom l'indique va chercher des infos de manière asynchrone par rapport à la vue utilisateur.
A mon avis c'est pas vraiment difficile à faire, 30 minutes de boulot en connaissant un minimum ajax, et du coup j'aurais plus utilisé le dom que InnerHTML, mais bon :D


 
Oui, bon, je pense qu'utiliser le DOM et rajouter des noeuds, c'est du kif kif avec rajouter mes bouts de table à mon InnerHTML (m^meme si d'un point de vue conceptuel, le DOM est plus élégant)
 
Concernant l'AJAX, c'est vrai que je ne m'y suis jamais penché, mais j'ai le sentiment que c'est assez straightforward.
 
Merci en tout cas. J'ai ma réponse: impossible d'avoir des tables affichées progressivement avec IE. Et ma réflexion a bien avancé par ailleurs.

Reply

Marsh Posté le 24-04-2007 à 00:24:18    

DOM est carrément plus classe pour le coup :o


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 24-04-2007 à 00:39:22    

Shinuza a écrit :

DOM est carrément plus classe pour le coup :o


 
Oui, oui, je le conçois.
 
Mais avec un InnerHTML, je maîtrise totalement ce que je fais (je créés ma string <tr> de toutes pièces et l'ajoute au contenu existant), contrairement à la manipulation du DOM, pour lequel je ne sais pas quels traitements sont effectués (ça reste de l'objet très haut niveau). J'ai tendance à me méfier des effets secondaires dans tout ce qui est très haut niveau (j'ai déjà eu de sales expériences pour des comportements qui nétaient pas standardisés, par ex un textarea qui compte les newline character différemment selon que l'on est sous IE, Opera ou FF), même si je pense que dans la situation qui nous concerne, je ne devrais pas avoir trop de craintes.
 

Reply

Marsh Posté le 24-04-2007 à 11:19:44    

J'ai déjà remplis des tables par ajax en les remplissants grace aux fonctions DOM. Tu n'as rien à craindres à part un défaut de certains IE : certaines versions d'IE oublient de rafraichir la page ce qui m'avait obliger à récupérer le contenu du innerhtml puis à le recopier dans le innerhtml (ca force IE à recalculer l'affichage).

Reply

Marsh Posté le 24-04-2007 à 11:49:05    

Intéresant à savoir.
Ca fait quand même un peu peur, car finalement, ça force à tester sous plusieurs versions d'IE, ce qui n'est pas super évident.
 
Tu pourrais me dire pour info quelles versions d'IE supportaient mal la MAJ du DOM. Tu faisais qcomment alors pour ces versions? Tu demandaient à ton code JS de détecter ces versions en particulier? Ou alors, tu as fait ton traitement innerHTML -> tampon -> innerHTML pour tous les browsers, quitte finalement à provoquer une double rafraîchissement?

Reply

Marsh Posté le 24-04-2007 à 12:50:14    

C'était avec un IE6 FR mais je n'ai plus la référence précise de la version. J'ignore si ca le fait avec tous les IE6.
De mémoire, j'ai utilisé le tampon quelque soit le navigateur et le double rafraichissement était invisible sous firefox peut être à cause du peu de ligne que j'avais à insérer.

Reply

Marsh Posté le 25-04-2007 à 09:11:50    

Reply

Marsh Posté le 25-04-2007 à 12:42:40    


 
Euh oui?
 
Si tu fais allusion à la propriété colgroup, j'ai bien précisé que je ne pouvais pas avoir de colonnes à largeur fixe. (plus le fait qu'il me semble que colgroup ne soit pas (bien) implémentée sous FF)

Reply

Marsh Posté le 25-04-2007 à 13:52:39    

Tu cache tout, puis onload tu reaffiches ?

 

Edit: Ajax c'est pas straigthforward bien au contraire


Message édité par supermofo le 25-04-2007 à 13:57:44
Reply

Marsh Posté le 25-04-2007 à 13:56:20    

supermofo> Bah ca sera encore pire... Je ne vois pas l'intérêt? Mon but au contraire n'est pas de cacher mais d'afficher au fur et à mesure...

Reply

Marsh Posté le 25-04-2007 à 14:05:07    

Ah bah j avais pas pige la question alors.

 

Si le temps de chargement excessif te pose probleme. C'est a dire que tu souhaites avoir un flux direct serveur <=> donnees. Ajax.

 

Ca se ferais sous forme d'un count en 1er, puis d'un iterateur sur total / 10 par exemple.

 

Si tu vx un truc fluide bah t'en prends 50, et tu simules un decalage vertical en JS. Un peu comme le preload d'image. (Rico Accordion)

 

Enfin ouais c'est un probleme tout a fait legitime, j'espere que tu vas trouver une solution.

 

De cette maniere tu gardes un script PHP propre, qui deroulera en fonction du numero de page et du paging.

Message cité 1 fois
Message édité par supermofo le 25-04-2007 à 14:16:07
Reply

Marsh Posté le 25-04-2007 à 14:10:29    

supermofo a écrit :

Ah bah j avais pas pige la question alors.
 
Si le temps de chargement excessif te fais pose probleme. C'est a dire que tu souhaites avoir un flux direct serveur <=> donnees. Ajax.
 
Ca se ferais sous forme d'un count en 1er, puis d'un iterateur sur total / 10 par exemple.


 
Disons que si j'ai posé la question au début, c'est parce que le comportement proposé par FF me convenait super bien (affichage et redimensionnement progressifs) et que je pensais qu'il était possible d'activer ça avec IE, rien de plus...
 

supermofo a écrit :


Si tu vx un truc fluide bah t'en prends 50, et tu simules un decalage vertical en JS. Un peu comme le preload d'image.


 
Tiens? Tu pourrais expliciter un peu plus? (je pense savoir ce qu'est le preload JS d'images, cad le fait d'avoir un tableau contenant des images (préloadées grâce à leur src) et disponibles à la demande) mais je ne saisis pas l'idée avec le décalage vertical, etc?

Reply

Marsh Posté le 25-04-2007 à 14:50:27    

T'avais raison sur le fait qu'il s agissait de HTML Javascript puisqu'ici ton script PHP est generique.

 

Une fois que t'as le contenu stocker dans ton application Javascript, tu px l'afficher avec animation dont le decalage vertical.
Recupere sur Manning Ajax in action. Ca tourne imppec des IE 6, mozilla et safari compris.

 
Code :
  1. var READY_STATE_UNNITIALIZED = 0;
  2. var READY_STATE_LOADING = 1;
  3. var READY_STATE_LOADED =2;
  4. var READY_STATE_INTERACTIVE = 3;
  5. var READY_STATE_COMPLETE = 4;
  6. var request=null;
  7. var console=null;
  8. function getXMLHTTPRequest(){
  9. var xRequest = null;
  10. if(window.XMLHttpRequest){
  11. xRequest = new XMLHttpRequest();
  12. }
  13. else if(typeof ActiveXObject != "undefined" ){
  14. xRequest = new ActiveXObject("Microsoft.XMLHTTP" );
  15. }
  16. return xRequest;
  17. }
  18. function sendRequest(url,params,HttpMethod){
  19. if(!HttpMethod){
  20. HttpMethod="POST";
  21. }
  22. var request = getXMLHTTPRequest();
  23. if(request){
  24. request.onreadystatechange = onReadyStateChange;
  25. request.open(HttpMethod,url,true);
  26. request.setRequestHeader("Content-type","application/x-www-urlencoded" );
  27. request.send(params);
  28. }
  29. function onReadyStateChange(){
  30. var ready = request.readyState;
  31. var data = null;
  32. if(ready == READY_STATE_COMPLETE){
  33. data= request.responseText;
  34. }
  35. // ici voir si on peut attendre la prochaine requete ???
  36. toConsole(data);
  37. }
  38. }
  39. function toConsole(data){
  40. if(console!=null){
  41. //affecter data au DOM
  42. }
  43. }
  44. }
 

Pour le onload

 
Code :
  1. window.onload=function(){
  2. var count = function getCount(); // a implementer
  3. console= document.getElementById("console" );
  4. for(var i = 0; i < count; i++){
  5. sendRequest('script.php?page='+i+'&paging=n');
  6. }
  7. }
 

Bon c'est pas indente et tout et tout ...

 

Pour l'animation a supposer que tu fetch 50 resultats de ton script PHP. Tu px les afficher de maniere fluide 10 resultat sur 50 et esperer que la prochaine requete HTTP s'est termine. Ya peut etre possibilite de bloquer l'affichage tant que la requete est pas terminee pour avoir un truc fluide. Mais bon l'idee est la.

 


Edit: T'as d'autres possibilites, comme spliter tes resultats en plusieurs pages via le JS.

 

Liens:
http://www.prototypejs.org/
http://jquery.com/
http://www.openrico.org/
http://script.aculo.us/

 


Message édité par supermofo le 25-04-2007 à 15:24:30
Reply

Marsh Posté le 25-04-2007 à 16:30:49    

Merci pour tout ça.
 
Concernant la partie Ajax, j'avais regardé ça hier. Je ne connaissais pas Ajax, mais finalement, si tu sais un peu comment marchent de sockets, c'est vraiment facile.
 
Pour la partie graphique, il faudra que je regarde. Je suis allé sur tes liens, et c'est vraiment sympa le genre d'anims que l'on peut y trouver. Ca donne envie de diséquer le code JS pour regarder comment ça fonctionne.
 
Sinon, tu aurais un exemple de tabla marchant comme ça?
 
Pour info, en ce qui me concerne, j'ai tranché hier: je propose finalement ç l'utilisateur un système de tabulation, et 50 lignes par page.. Et à côté de ça, je lui donne le choix du nombre de résultats par page, et même une option "All". Si c'est ltuilisatur qui clique sur All, il est implictement conscient que ça va prendre du temps.

Reply

Marsh Posté le 27-04-2007 à 08:55:08    

omega2 a écrit :

C'était avec un IE6 FR mais je n'ai plus la référence précise de la version. J'ignore si ca le fait avec tous les IE6.
De mémoire, j'ai utilisé le tampon quelque soit le navigateur et le double rafraichissement était invisible sous firefox peut être à cause du peu de ligne que j'avais à insérer.


 
Tiens, je viens de faire un petit test, et effectivement, même avec IE7, pour qu'une modification du DOM soit prise en compte sur la page, il faut faire un refresh du innerHTML. Donc, à mon avis, le comportement que tu décrivais est le même sur toutes les versions d'IE, et ça doit sans doute être voulu...

Reply

Marsh Posté le 27-04-2007 à 20:06:43    

Aucune idee  
 
Par contre il faut que tes app ait un comportement par defaut normal.
 
Par la j entend que tes scripts clients ne doivent pas modifier le fonctionnement de ton app PHP.
 
Au mieux, si le client n'interprete pas javascript tu auras un truc qui marche et ensuite tu rajoutes ...

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed