Loogaroo : Lamp / web 2.0 / Ajax ... » Javascript

Modification javascript pour les tables

Manu — Fri, 28 Sep 2007 17:32:25 +0000

Comme plusieurs d’entre vous veulent connaitre les modifications que j’ai fait pour les tableaux javascript (suite des commentaires sur l’article “Economisez votre serveur : Triez en javascript”

Pour rappel, la page d’exemple se trouve ici : la page des entrainements de MARC78 sur Wanarun

Les modifications de la librairies sortable.js
Ajout d’une variable pour la taille des pages

var maxRows=20;

Ajout de la fonction showPageTable()

function showPageTable(table,number)
{
for (j=1;j
rows.length;j++)>{
if (j(number-1)>=(maxRows*(number)+1))
{
table.rows[j].style.display='none';
}
else
{
table.rows[j].style.display='';
}
}
}

Modification de sortables_init()

//après la ligne
ts_makeSortable(thisTbl);
//j'initiliase mon tableau sur la premiere page
showPageTable(thisTbl,'1');

Dans le php

//il faut définir une variable commune avec le javascript
define("NB_LIGNE_TABLEAU",20);
$list=$data["performance"];
$page_str="";
$separator=" | ";
$nb_page=floor(sizeof($list)/NB_LIGNE_TABLEAU)+1;
if ($nb_page>1)
{
for($i=1;$i<=$nb_page;$i++)
{
$page_str.="#" onclick="\"showPageTable($('unique_id'),'".$i."')\"">".$i."";
$page_str.=$separator;
}
echo substr($page_str,0,-strlen($separator));
}

Partager et découvrir : Ces icônes sont des liens vers des sites de partage de signet sociaux où les lecteurs peuvent partager et découvrir de nouveaux liens.

Firebug

Manu — Wed, 26 Sep 2007 17:18:15 +0000

C’est sans aucun doute la meilleure extension firefox que j’ai vu ! Elle m’a même reconcilier avec le CSS et le Javascript !

Console pour la gestion des erreurs : Javascript, CSS,..

Exploration HTML :

Exploration CSS :

Mesure des temps de chargements :

Télécharger Firebug

Partager et découvrir : Ces icônes sont des liens vers des sites de partage de signet sociaux où les lecteurs peuvent partager et découvrir de nouveaux liens.

Javascript : attention aux chargements

Manu — Sat, 08 Sep 2007 16:58:53 +0000

Vous avez surement remarqué depuis l’apparition des sites web 2.0 avec l’apparition d’Ajax, le code Javascript des sites a pris de l’embonpoint. Raison à cela : la multiplication des librairies javascript (prototype, script.aculo.us, dojo et autres librairies).

On se retrouve avec 5 / 6 voire 10 includes javascript au début de la page (sans compter les tags google analytics et autres).

Donc parfois la première page est souvent laborieuse à venir . Après je vous accorde que le navigateur fait son boulot et gère correctement le cache mais le chargement de la première page c’est aussi la première impression de l’internaute.

En fait le probleme est très simple, un navigateur ne parallelise pas le chargement des includes javascript, il les lit dans l’ordre car il interprete le code. On se retrouve donc avec une suite de requetes de chargements / interpretations de fichier javascript.

La solution est simple, vous pouvez développer avec une liste de fichiers javascript mais lors de la mise en production, concatenner tous vos fichiers javascript en 1 seul (plus gros mais unique donc un peu moins rapide à charger mais une seule requete et pas d’attente)

Partager et découvrir : Ces icônes sont des liens vers des sites de partage de signet sociaux où les lecteurs peuvent partager et découvrir de nouveaux liens.

Economisez votre serveur : Triez en Javascript

Manu — Fri, 07 Sep 2007 15:30:11 +0000

Avec un peu de javascript, on peut assez facilement dimunuer le nombre de requetes vers le serveur et ainsi le soulager de travail inutil. En effet, il est toujours mieux de faire le travail sur le poste du client que sur le serveur !

Un exemple très simple est “les tris sur les tables HTML“, vous avez un tableau triable avec la possibilité de trier selon plusieurs colonnes. En php, c’est un peu long a mettre en place il faut gérer le “ORDER BY“, les différentes clés… pour la plupart du temps une petite liste.

Bien sûr, quand la requete renvoit 10000 élements c’est plus difficile de faire autrement mais est-ce vraiment le cas ?

Personnelement j’utilise une petite libriairies Javascript sortable, qui permet de rendre une table HTML toute simple en veritable petite tableau Excel.

Voici un exemple sur mon site Wanarun. Vous y verrez aussi une petite surprise pour la gestion des pages…

Partager et découvrir : Ces icônes sont des liens vers des sites de partage de signet sociaux où les lecteurs peuvent partager et découvrir de nouveaux liens.

Ajax / PHP : Trucs et Astuces #1

Manu — Sat, 01 Sep 2007 18:49:12 +0000

Le tips le plus important est de trouver le bon framework, personnellement j’utilise principalement Prototype.

Un exemple tout simple pour mettre a jour un div par le contenu d’un page php

/*
fonction qui permet de charger le html renvoyé
par /ajaxdiv/contenu.php?isajax=1
dans le div page_contenu
*/
function litContenu()
{
//parametre pour la page
var pars = 'isajax=1';
//object utilisé pour la mise à jour
var myAjax = new Ajax.Updater(
//identifiant du div à mettre à jour
'page_contenu',
//url
'/ajaxdiv/contenu.php',
{
parameters: pars,
method: 'get',
});
}

Partager et découvrir : Ces icônes sont des liens vers des sites de partage de signet sociaux où les lecteurs peuvent partager et découvrir de nouveaux liens.