Forcer l'affichage progressif de grandes tables sous IE? [PHP/HTML] - PHP - Programmation
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
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...
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.
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.
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.
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.
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
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 : |
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.
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. |
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.
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)
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!
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
Marsh Posté le 23-04-2007 à 23:26:59
Shinuza a écrit : Non c'est lié au moteur de rendu d'IEx(7?). |
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.
Marsh Posté le 24-04-2007 à 00:24:18
DOM est carrément plus classe pour le coup
Marsh Posté le 24-04-2007 à 00:39:22
Shinuza a écrit : DOM est carrément plus classe pour le coup |
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.
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).
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?
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.
Marsh Posté le 25-04-2007 à 09:11:50
La base...
http://acces-pour-tous.net/fichier [...] b=tableaux
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)
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
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...
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.
Marsh Posté le 25-04-2007 à 14:10:29
supermofo a écrit : Ah bah j avais pas pige la question alors. |
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 : |
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?
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 :
|
Pour le onload
Code :
|
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/
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.
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. |
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...
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 ...
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.