[AJAX] Tableau triable ajax

Bonjour,

Me voici confronté à un gros problème.

Explication : J'ai une page php nommé index.php qui dispose de deux grandes parties. La partie du haut est tout ce qui filtre c'est à dire un formulaire composé de plusieurs input select et radio. Quand je clique sur le bouton rafraichir je fais appel à une fonction javascript qui va me lire tous mes filtres et me les envoyer sur une autre page php nommé table.php grâce à ajax. sur cette page je fabrique une requete avec mes filtres une fois le traitement achevé le serveur me renvoie un responseText que j'inclus dans ma première page php grâce à un innerHTML. ( Le traitement peu être très lourds et long ). Dans table.php, j'ai donc une table qui affiche le résultat de la requête avec comme entête

<script type="text/javascript" src="javascripts/sorttable.js">
echo "<table name='statistique' class='sortable'>";

Au retour de ce responseText, je n'ai pas le tableau triable, comment pourrais-je avoir un tableau triable en javascript au retour d'une page php interprété par de l'ajax ?

Merci d'avance. A bientôt.

Yop!

Ceci devrait t'aider:
http://www.kryogenix.org/code/browser/sorttable/

Peu tu m'en dire un peu plus je ne comprends pas ce que tu veu me montrer ?

Yop!


Bin si j'ai bien compris ton message, tu cherches à trier un tableau sur le client sans avoir à recharger les données.
Donc l'URL que je t'ai donnée explique comment trier un tableau en javascript.
Pour voir le code au travail, tu cliques simplement sur les headers du tableau (en blanc) et le tableau se trie selon le critère choisi (name, salary, extension, ...)

Voilà voilà...

Je vais te mettre ça car je crois que c'est pas tout à fait ça mon problème, ce que tu veu m'expliquer c'est je crois dans le cas le plus simple mais bien sur c'est pas celui la le mien ^^ dis moi si tu comprends mieux comme ça :

J'ai une page index.php :
- Comprends un formulaire
- Un input onclick="envoyer()" --> envoyer se trouve dans fonction.js

Ensuite fonction.js
- Comprends ceci :
Code : JavaScript

Citation:

---

var xhr = null;


function getXhr()
{
if(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
try
{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else
{
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest, veuillez le mettre à jour");
xhr = false;
}
}


function envoyer()
{
getXhr();
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
document.getElementById('StatBox').innerHTML = xhr.responseText;
}
else if(xhr.readyState == 3)
{
document.getElementById('StatBox').innerHTML = "Veuillez patienter traitement en cours ... <br><br> <img src='Image/chargement.gif' alt='chargement'> <br><br> Attention : temps d'attente plus ou moins long suivant la requête demandée.";
}
}
xhr.open("POST",'table.php',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var analyse = document.getElementById('id_analyse_par').value ;
var magasin = document.getElementById('id_magasin').value ;
var datedeb = document.getElementById('id_datedeb').value ;
var datefin = document.getElementById('id_datefin').value ;
var client = document.getElementById('client').value ;
var famille_article = document.getElementById('id_famille_article').value ;
var article = document.getElementById('article').value ;
var sous_famille_article = document.getElementById('id_sous_famille_article').value ;
var fournisseur = document.getElementById('id_fournisseur').value ;
for( var i = 0; i < 4; i++)
{
if(document.forms[0].achatvente[i].checked == true)
{
var achatvente = document.forms[0].achatvente[i].value ;
}
}
xhr.send("analyse="+analyse+"&magasin="+magasin+"&datedeb="+datedeb+"&datefin="+datefin+"&client="+client+"&famille_article="+famille_article+"&article="+article+"&sous_famille_article="+sous_famille_article+"&fournisseur="+fournisseur+"&achatvente="+achatvente);
}

---

Ensuite j'ai table.php qui contient :

<script type="text/javascript" src="javascripts/sorttable.js">
echo "<table name='statistique' class='sortable'>";
mon tableau
echo "</table>";


Et donc dans la fonction envoyer() me renvoie dans ma première page ce tableau mais pourquoi n'est il pas triable ? Il n'y a aucune solution ?

Yop!

La fonction envoyer() place tous les résultats de la requête en vrac dans l'élément dont l'ID est "StatBox".

Code:

---

1 2	document.getElementById('StatBox').innerHTML = xhr.responseText;

---

Cet élément "StatBox" se trouve dans la page index.php.

Où voudrais-tu placer les résultats de la requête? Dans l'élément dont le nom est "statistique "et qui se trouve dans la page table.php?

Voila ce qui ce passe : je dois créer une requete à l'aide de filtre qui sont en fait des condition de ma requete les filtres ).

Donc dans index.php j'ai mes filtres que je recupere par la fonction envoyer dans fonction.php lors du onclick envoyer et que j'envoie a mon table.php dans table.php je construit ma requete avec mes filtres et je construit ma table grace a des echo td, th. Puis une fois le traitement terminé je renvoie tout ca dans ma page index.php dans le div StatBox.

Donc le tableau s'affiche très bien en dessous de mes filtres dans la page index.php comme prévu le seul hic c'est que cette table n'est pas triable.
Car dans table.php j'avais echo "<table name='statistique' class='sortable'>". Le fait de mettre class='sortable me tri automatiquement ma table grâce à un script javascript que j'ai trouvé mais là du fait que ça a été exécuté par de l'ajax il ne veut plus me le trié.

je sais pas si j'ai bein répondu a ta question ... :?

Yop!


S'cuze moi, je suivais ce fil en même temps que je bossais, j'étais donc un peu distrait...

Le problème est que table.php n'est jamais affiché: index.php lui transmet des paramètres via le POST, et table.php lui renvoie les donnée avec le Response, mais cette page ne 'affiche pas.

Si tu veux afficher table.php, il suffit de lui soumettre ton formulaire avec la méthode classique, et tu n'as pas besoin d'AJAX.

Ouai je vois mais ce qui a c'est que ma table s'affiche correctement puisque qu'avec le response de ce que j'ai compris il va me chercher tous ce qui est de type html dans la page table.php et ça marche pas mal mon problème est que j'ai l'impression qu'il me renvoie que mon résultat et il me prends pas mon <table class="sortable"> qui me permet donc de le trié. On dirait qu'il me la déjà interprété et donc après quand je retrouve dans index.php ou est afficher ma table il ne trouve plus de class sortable et ainsi il ne le trie pas.

Je ne sais pas si ce que je dit est bien clair, désolé.

Yop!

Mmh, le javascript est exécuté dans index.php, c'est peut-être dans cette page qu'il faut placer ton

Code:

---

1 2	<script type="text/javascript" src="javascripts/sorttable.js">

---

.

Ouai je l'avais déjà tenté malheureusement sans réussite :D ...

Yop!


Mouais bon, pourquoi ne pas laisser tomber AJAX et utiliser une iframe? (je sais, c'est mal :?)

Dans index.php, tu crées une iframe, tu soumets ton formulaire avec table.php comme action et ton iframe comme target.

Comme ça, le sorttable.js est associé directement au document qui va l'utiliser, le tableau est affiché par la page qui l'a créé et ça devrait simplifier les choses.

Aucun donc à ce que j'ai compris tu n'as pas la réponse à ma question :p mais tu me proposes qui pourrait marcher.

Pourquoi pas je vais m'y intéresser voir si ça marche pas trops mal mais si y en a qui la réponse je veu bien.

En tout cas merci ryan pour ton aide :D.

A bientôt.

Yop!

Il existe , comme souvent, d'autre solutions.

Tu pourrais déclarer ton tableau "statistique" dans la page index.php, et inclure le sorttable.js dans cette page.

La page table.php ne générerait que le contenu du tableau (donc sans le <table> et le </table>) et tu peuplerais le tableau avec le Response.

J'ai laissé tombé merci pour ton aide j'ai finalement mis tout sur la première page comme au début pas d'ajax.

A bientôt.