IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] Filtrer comme Excel un tableau PHP


Sujet :

AJAX

  1. #1
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 8
    Par défaut [AJAX] Filtrer comme Excel un tableau PHP
    Bonjour,
    Dans le sujet de mon stage en entreprise, je dois pouvoir appliqué des filtres comme sous excel sur le tableau de resultat d'une requete SQL.
    Sachant que par exemple j'ai la table membre avec nom, prenom dedans.
    J'ai deux listes déroulante : nom et prenom
    Si je selectionne Dupont dans les nom et que j'ai les freres dupont : Jean et Gerard il ne doit y avoir plus que Jean et Gerard d'afficher dans les prenoms.
    Et en dessous du formulaire de recherche les resultats s'affiche sans mettre a jour toute la page.

    Jusqu'a maintenant j'ai fait quelque chose d'un peu flou et faux
    J'ai une premiere page test.php qui contient le formulaire de "filtrage" a 7 Champs. Par AJAX dès que je modifiais une de mes listes J'envoyais tous les valeurs de chaque liste, par la méthode GET, a la page test2.php.
    Suite a ca la page 2 se connect a la DB, recupere mon tableau de TOUTE les valeurs et pas seulement celle filtrer, et ensuite traite le filtrage a l'aide de 2 tableaux : Celui contenant toutes les données et celui contenant les données filtré.

    Le filtrage ce fait de la maniere suivante (Bien sur ici j'ai appliqué a mon exemple de nom et prenom)
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    if(isset($_GET['nom']) && $_GET['nom']!="" && $_GET['nom']!="Nom")
    {
    	$tabFiltre = ajouterFiltre($tabDonnee,$tabFiltre, $_GET['nom'], 0);
    }
     
    if(isset($_GET['prenom']) && $_GET['prenom']!="" && $_GET['prenom']!="Prenom")
    {
    	$tabFiltre = ajouterFiltre($tabDonnee,$tabFiltre, $_GET['prenom'], 1);
    }
     
     
    function ajouterFiltre($tabDonnee, $tabFiltre, $filtre, $colonne){
    	if(sizeof($tabFiltre)>0){
    		for($i = 0; $i < sizeof($tabFiltre); $i++)
    			if($tabFiltre[$i][$colonne] != $filtre) unset($tabFiltre[$i]);
     
    		$tabFiltre=array_values($tabFiltre);
    	}
    	else {
    		for($i = 0; $i < sizeof($tabDonnee); $i++)
    		{
    			if(($tabDonnee[$i][$colonne]==$filtre)==0)	array_push($tabFiltre,$tabDonnee[$i]);
    		}
    	}
    	return $tabFiltre;
    }

    Je creer ensuite un tableau contenant les resultats de ma requete et ce tableau je le renvoie pour le recevoir sur test.php grace a responsesText.

    Seulement je pense que vous l'avez compris je ne peux pas recuperer de variable $tableau contenant ce tableau dans test.php et donc il m'est impossible de mettre a jour mes autres champs comme ici le champ prenom.
    Mon but est donc de pouvoir avoir cette variable sans passé par les SESSIONS ou les COOKIES.

    J'ai décidé de passé par AJAX pour ne pas avoir a changer de page et pouvoir executé en arriere plan les requetes.

    Si vous avez d'autre informations n'hésiter pas !

    Merci d'avance

    Cordialement,
    Neobrain

  2. #2
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Bonjour,

    Fait une petite recherche sur "javascript tablesorter".

    A+.

  3. #3
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 8
    Par défaut
    C'est plus du tri d'un tableau ca, moi ce n'est pas du tri mais du filtre que je veux faire

  4. #4
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Ok, on modifie alors les mots clés pour la recherche "jQuery table filter" .

  5. #5
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 8
    Par défaut
    Après avoir chercher toute la journée voici la solution ! Merci beaucoup

    Par contre, j'peux tout a faire faire ce type de filtrage tout en affichant les lignes sur plusieurs pages ?
    Car bon il y aura a peu près 3000 élements dans ma base final donc bon : /

    EDIT : Je sais faire du decoupage de resultat par page mais la ca pose un probleme du faite que le tableau est un resultat de la requete asynchrone Je craque un peu ^^

  6. #6
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 8
    Par défaut
    Bonjour,
    J'ai recherché un peu et je n'ai pas encore trouvé le moyen de dissocié les colonnes de filtrage du tableau ce qui est mon but final, j'aimerais affiché le resultat sur plusieurs "pages".
    En faite c'est plutot afficher le resultat comme les topics ici, après un certains nombre de message il 2 ou plusieurs pages.

    Merci.

    Cordialement

  7. #7
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 8
    Par défaut
    Pas de reponse..
    Je retente ma chance, cette fois ci j'ai recréer les fonction qui me permette d'afficher ou non des elements de mon tableau en fonction des filtres appliqués.
    Le problème maintenant vient du découpage par page, je n'arrive pas a voir comment j'pourrais faire, pour les filtres j'utilise "display:none" ou "display:block" et pour les pages je ne peux donc pas l'utilisé puisque mes listes sont mise a jour en fonction de ce qui est "block" ou "none"..
    J'ai essayé avec "visibility:hidden" ou "visibility:"

    Par soucis de securité les infos de la requete SQL on été modifié.
    Ci joint les différents scripts :
    index.html :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html>
    	<head>
    		<script src="recherche.js" language="javascript" type="text/javascript"></script>
    	</head>
    	<body onload="AppelScript();">
    		<select id="selectLibelle" onchange="majTableau();">
    			<option value="Libelle Ligne">Libelle Ligne</option>
    		</select>
     
    		<select id="selectDescription" onchange="majTableau();">
    			<option value="Description Ligne">Description Ligne</option>
    		</select>
    		<div id="resultat">
    		</div>
     
    		<a href="#" onclick="page++; afficheTableau();">Page Suivante</a>
    	</body>
    </html>

    recherche.js :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    var resultatParPage = 15;
    var page = 0;
     
    function AppelScript() {
    	var xhr=null;
    	if (window.XMLHttpRequest) { 
    		xhr = new XMLHttpRequest();
    	}
    	else if (window.ActiveXObject) 
    	{
    		xhr = new ActiveXObject("Microsoft.XMLHTTP");
    	}
     
    	xhr.onreadystatechange = function() { reponse(xhr); };
     
    	xhr.open("GET", "script.php", true);
    	xhr.send(null);
    }
     
    function reponse (xhr) {
    	if(xhr.readyState == 4)
    	{
    		if (xhr.status == 200)
    		{
    			var rep = xhr.responseText;
    			document.getElementById("resultat").innerHTML = rep;
    			afficheTableau();
    			afficheListe();
    		} else if (xhr.status == 400) {
    			alert('Not Found!');
    		}
    	}
    }
     
    function changerPage() {
    	var table = document.getElementById("test");
    	var row = table.getElementsByTagName('tr');
    	for (var i=0; i < row.length; i++)
    	{
    		row[i].style.visibility = "hidden";
    	}
     
    	for (var i=page*resultatParPage; i < (page*resultatParPage+resultatParPage)&&row.length; i++)
    	{
    		row[i].style.visibility = "";
    	}
    }
     
    function afficheTableau() {
    	var table = document.getElementById("test");
    	var row = table.getElementsByTagName('tr');
    	changerPage();
    	for (var i=page*resultatParPage; i < (page*resultatParPage+resultatParPage)&&row.length; i++)
    	{
    		row[i].style.display = "block";
    	}
    }
     
    function majTableau() {
    	var table = document.getElementById("test");
    	var row = table.getElementsByTagName('tr');
    	var leselectLibelle = selectIndex(document.getElementById("selectLibelle"));
    	var leselectDescription = selectIndex(document.getElementById("selectDescription"));
     
    	afficheTableau();
     
    	if(leselectLibelle.index != 0)
    	{
    		for (var i=0; i < row.length; i++)
    		{
    			if(row[i].cells[0].innerHTML!=leselectLibelle.value)
    			{
    				row[i].style.display = "none";
    			}
    		}
    	}
     
    	if(leselectDescription.index != 0)
    	{
    		for (var i=0; i < row.length; i++)
    		{
    			if(row[i].cells[1].innerHTML!=leselectDescription.value)
    			{
    				row[i].style.display = "none";
    			}
    		}
    	}
     
    	majListe();
    }
     
    function afficheListe() {
    	var table = document.getElementById("test");
    	var row = table.getElementsByTagName('tr');
    	var leselectLibelle = document.getElementById("selectLibelle");
    	var leselectDescription = document.getElementById("selectDescription");
    	for (var i=0; i < row.length; i++)
    	{
    		if(row[i].style.display != "none")
    		{
    			leselectDescription.options[leselectDescription.length] = new Option(row[i].cells[1].innerHTML);
    			leselectLibelle.options[leselectLibelle.length] = new Option(row[i].cells[0].innerHTML);
    		}
    	}
    }
     
    function majListe() {
    	var table = document.getElementById("test");
    	var row = table.getElementsByTagName('tr');
    	var leselectLibelle = document.getElementById("selectLibelle");
    	var leselectDescription = document.getElementById("selectDescription");
     
    	var selectedLibelle = selectIndex(leselectLibelle).value;
    	var selectedDescription = selectIndex(leselectDescription).value;
     
    	afficheListe();
     
    	if (selectedLibelle.index!=0 && selectedLibelle!="Libelle Ligne") {
    		viderSelect (leselectLibelle);
    		leselectLibelle.options[leselectLibelle.length] = new Option(selectedLibelle);
    		leselectLibelle.options[leselectLibelle.length-1].selected = true;
    	} else if  (selectedLibelle.index==0 || selectedLibelle=="Libelle Ligne"){
    		viderSelect (leselectLibelle);
    		for (var i=0; i < row.length; i++)
    		{
    			if(row[i].style.display != "none")
    			{
    				leselectLibelle.options[leselectLibelle.length] = new Option(row[i].cells[0].innerHTML);
    			}
    		}
    	}
     
    	if (selectedDescription.index!=0 && selectedDescription!="Description Ligne") {
    		viderSelect (leselectDescription);
    		leselectDescription.options[leselectDescription.length] = new Option(selectedDescription);
    		leselectDescription.options[leselectDescription.length-1].selected = true;
    	} else if  (selectedDescription.index==0 || selectedDescription=="Description Ligne"){
    		viderSelect (leselectDescription);
    		for (var i=0; i < row.length; i++)
    		{
    			if(row[i].style.display != "none")
    			{
    				leselectDescription.options[leselectDescription.length] = new Option(row[i].cells[1].innerHTML);
    			}
    		}
    	}
    }
     
    function viderSelect (select) {
    	tabOption = select.options;
    	for (var i = select.length; i > 0; i--)
    	{
    		tabOption[i] = null;
    	}
    }
     
    function selectIndex(select) {
    	tabOption = select.options;
    	return tabOption[tabOption.selectedIndex];
    }
    script.php :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <?php
    include_once('config/config.inc.php');
     
    try {
    	$db = new PDO('mysql:host='. HOST .';dbname='.DBNAME, USER, PASS);
    	$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    } catch (PDOException $e) {
    	echo 'Échec lors de la connexion : ' . $e->getMessage();
    }
     
    $select = $db->query("SELECT nom, prenom FROM membre");
     
    echo "<table id=\"test\">";
    while ($donnee = $select->fetch())
    {
    		echo "<tr>";
    		echo "<td>". formatText($donnee[0]) ."</td>";
    		echo "<td>". formatText($donnee[1]) ."</td>";
    		echo "</tr>";
    }
    echo "</table>";
     
    function formatText($chaine)
    {
    	$chaine = htmlentities($chaine, ENT_NOQUOTES, 'ISO-8859-1');
    	$chaine = preg_replace('#&([A-za-z])(?:acute|cedil|circ|grave|orn|ring|slash|th|tilde|uml);#', '\1', $chaine);
    	$chaine = preg_replace('#&([A-za-z]{2})(?:lig);#', '\1', $chaine); // pour les ligatures e.g. '&oelig;'
    	$chaine = preg_replace('#&[^;]+;#', '', $chaine); // supprime les autres caractères
    	$chaine = preg_replace('#,#','.',$chaine);
     
    	if($chaine == "")
    	{
    		$chaine = "non defini";
    	} else {
    		$chaine = strtolower($chaine);
    	}
     
    	return $chaine;
    }
    ?>

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,
    pourquoi ne pas utiliser un compteur qui te permet de générer ta pagination?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var numPage   = ???; // à récupérer et commençant à 0
    var nbParPage = 20;  // par exemple
    var debEnreg  = nbParPage * numPage;
    var finEnreg  = debEnreg +nbParPage;

  9. #9
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 8
    Par défaut
    Le problème est de justement faire cette affichage.
    Je n'arrive pas a "enlever" les elements qui ne sont pas censé être dans la page.

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    En fait plutôt que de les masquer je ne les mettrait pas.

    Mais coté client tu peut toujours masquer les TR non concernées, par exemple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var debEnreg  = nbParPage * numPage;
    var finEnreg  = debEnreg +nbParPage;
     
    var oTable = document.getElementById("test");
    var oRows = oTable.rows; // la nodeList des lignes
    // masque les premières lignes
    for( var i= 0; i < debEnreg; i++){
      oRows[i].style.display = 'none';
    }
    // affiche les concernées
    for( i = debEnreg; i < finEnreg; i++){
      oRows[i].style.display = '';
    }
    // masque les premières lignes
    for( i = finEnreg; i < oRows.length; i++){
      oRows[i].style.display = 'none';
    }
    on doit pas en être bien loin, à la gestion des bornes prête.

    nota: il n'y a rien d'Ajax là dedans!

  11. #11
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2013
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 8
    Par défaut
    Ne pas les mettre ?
    Cela veut dire qu'on devrait rappeler le script PHP à chaque modification c'est bien ca ?
    J'ai réussi a faire un système de page, mais la je cherche un moyen de le faire correctement car actuelle si un resultat lors de l'affichage de toutes les lignes se trouve page 2, lors de l'application de filtre il restera page 2 au lieu de remonter en quelque sorte dans le tableau et donc de passé page 1..
    J'suis désolé de posé toutes ses questions, je cherche aussi de mon côté, je progresse mais il me reste toujours quelques inconnues.

    Actuellement lorsque je fais F5 par exemple mon script n'est pas mis a jour il faut que je ferme l'onglet et que je le réouvre, je ne sais pas exactement pourquoi d'ailleurs.

    Si ce n'est pas de l'AJAX pardonnez moi et si posisble deplacé dans la bonne section

    Voici à nouveau les scripts qui ont donc été modifié.

    Merci.

    index.html
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html>
    	<head>
    		<title>Essais Formulaire de recherche</title>
    		<script src="recherche.js" type="text/javascript"></script>
    		<link rel="stylesheet" href="style.css">
    	</head>
    	<body onload="AppelScript();">
    		<div>
    			<select id="selectLibelle" onchange="majTableau();">
    				<option value="Libelle Ligne" selected>Libelle Ligne</option>
    			</select>
     
    			<select id="selectDescription" onchange="majTableau();">
    				<option value="Description Ligne"  selected>Description Ligne</option>
    			</select>
    			<br />
     
    		</div>
    		<div id="resultat">
    		</div>
    		<div id="page">
    				<a href="#" onclick="precedent(); afficheTableau();">&lt;</a>
    				<span id="numeroPage">Page : </span>
    				<a href="#" onclick="suivant(); afficheTableau();">&gt;</a>
    		</div>
    	</body>
    </html>


    recherche.js :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    Array.prototype.unset = function(val){   
    	var index = this.indexOf(val) 
    	if(index > -1){  
    		this.splice(index,1); 
    	} 
    } 
     
    var tabLigneVisible = [];
    var filtreActif = [];
    var resultatParPage = 15;
    var page = 0;
    var nbTotalPage = 0;
     
    function precedent() {
    	if(page > 0) page--;
    	majNumPage();
    }
     
    function suivant() {
    	if(page < (nbTotalPage-1)) page++;
    	majNumPage();
    }
     
    function majNumPage() {
    	document.getElementById('numeroPage').innerHTML = "Page : " + (page+1) + " / " + nbTotalPage;
    }
     
    function AppelScript() {
    	var xhr=null;
    	if (window.XMLHttpRequest) { 
    		xhr = new XMLHttpRequest();
    	}
    	else if (window.ActiveXObject) 
    	{
    		xhr = new ActiveXObject("Microsoft.XMLHTTP");
    	}
     
    	xhr.onreadystatechange = function() { reponse(xhr); };
     
    	xhr.open("GET", "script.php", true);
    	xhr.send(null);
    }
     
    function reponse (xhr) {
    	if(xhr.readyState == 4)
    	{
    		if (xhr.status == 200)
    		{
    			var rep = xhr.responseText;
    			document.getElementById("resultat").innerHTML = rep;
     
    			var table = document.getElementById("test");
    			var row = table.getElementsByTagName('tr');
     
    			for (var i=0; i < row.length; i++)
    			{
    				tabLigneVisible[i] = true;
    			}
    			afficheTableau();
    			majListe();
    		} else if (xhr.status == 400) {
    			alert('Not Found!');
    		}
    	}
    }
     
    function compterNbPage() {
    	var nbResultat = 0;
    	for(var i = 1; i < tabLigneVisible.length; i++)
    	{
    		if (tabLigneVisible[i]) nbResultat++;
    	}
    	return Math.ceil(nbResultat/resultatParPage);
    }
     
    function afficheTableau() {
    	var table = document.getElementById("test");
    	var row = table.getElementsByTagName('tr');
    	nbTotalPage = compterNbPage();
     
    	for (var i=1; i < row.length; i++)
    	{
    		row[i].style.display = "none";
    	}
     
    	for (var i=page*resultatParPage; i < (page*resultatParPage+resultatParPage)&&row.length; i++)
    	{
    		if(tabLigneVisible[i])
    		{
    			row[i].style.display = "table-row";
    		}
    		else
    		{
    			row[i].style.display = "none";
    		}
    	}
     
    	majNumPage();
    }
     
    function majTableau() {
    	var table = document.getElementById("test");
    	var row = table.getElementsByTagName('tr');
    	var leselectLibelle = selectIndex(document.getElementById("selectLibelle"));
    	var leselectDescription = selectIndex(document.getElementById("selectDescription"));
     
    	for (var i=1; i < row.length; i++)
    	{
    		tabLigneVisible[i] = true;
    	}
     
    	if(leselectLibelle.index != 0)
    	{
    		for (var i=1; i < row.length; i++)
    		{
    			if(row[i].cells[0].innerHTML!=leselectLibelle.value)
    			{
    				tabLigneVisible[i] = false;
    			}
    			else
    			{
    				tabLigneVisible[i] = true;
    			}
    		}
    	}
     
    	if(leselectDescription.index != 0)
    	{
    		for (var i=1; i < row.length; i++)
    		{
    			if(row[i].cells[1].innerHTML!=leselectDescription.value)
    			{
    				tabLigneVisible[i] = false;
    			}
    			else
    			{
    				tabLigneVisible[i] = true;
    			}
    		}
    	}
    	majListe();
    	afficheTableau();
    }
     
    function majListe() {
    	var table = document.getElementById("test");
    	var row = table.getElementsByTagName('tr');
    	var leselectLibelle = document.getElementById("selectLibelle");
    	var leselectDescription = document.getElementById("selectDescription");
    	var libelle = leselectLibelle.options[leselectLibelle.selectedIndex].value;
    	var description = leselectDescription.options[leselectDescription.selectedIndex].value;
     
    	if (leselectLibelle.selectedIndex!=0) {
    		viderSelect (leselectLibelle);
    		leselectLibelle.options[leselectLibelle.length] = new Option(libelle);
    		leselectLibelle.options[leselectLibelle.length-1].selected = true;
    	} else {
    		viderSelect (leselectLibelle);
    		for (var i=1; i < row.length; i++)
    		{
    			if(tabLigneVisible[i])
    			{
    				if(!inSelect(leselectLibelle, row[i].cells[0].innerHTML)) leselectLibelle.options[leselectLibelle.length] = new Option(row[i].cells[0].innerHTML);
    			}
    		}
    	}
     
    	if (leselectDescription.selectedIndex!=0) {
    		viderSelect (leselectDescription);
    		leselectDescription.options[leselectDescription.length] = new Option(description);
    		leselectDescription.options[leselectDescription.length-1].selected = true;
    	} else {
    		viderSelect (leselectDescription);
    		for (var i=1; i < row.length; i++)
    		{
    			if(tabLigneVisible[i])
    			{
    				if(!inSelect(leselectDescription, row[i].cells[1].innerHTML)) leselectDescription.options[leselectDescription.length] = new Option(row[i].cells[1].innerHTML);
    			}
    		}
    	}
    }
     
    function inSelect(leselect, valeur) {
    	for(var i = 0; i < leselect.options.length; i++)
    	{
    		if(leselect.options[i].value == valeur) return true;
    	}
     
    	return false;
    }
     
    function viderSelect (select) {
    	tabOption = select.options;
    	for (var i = select.length; i > 0; i--)
    	{
    		tabOption[i] = null;
    	}
    }
     
    function selectIndex(select) {
    	tabOption = select.options;
    	return tabOption[tabOption.selectedIndex];
    }
    script.php :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <?php
    include_once('config/config.inc.php');
     
    try {
    	$db = new PDO('mysql:host='. HOST .';dbname='.DBNAME, USER, PASS);
    	$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    } catch (PDOException $e) {
    	echo 'Échec lors de la connexion : ' . $e->getMessage();
    }
     
    $select = $db->query("SELECT nom, prenom FROM membre");
     
    echo "<table id=\"test\" width=900>";
    echo "<th>Libelle</th>";
    echo "<th>Description</th>";
    $i = 0;
    while ($donnee = $select->fetch())
    {
    		if ($i%2==0) { echo "<tr class='pair tdsurvol'>"; }
    		else { echo "<tr class='impair tdsurvol'>"; }
    		echo "<td>". formatText($donnee[0]) ."</td>";
    		echo "<td>". formatText($donnee[1]) ."</td>";
    		echo "</tr>";
     
    	$i++;
    }
    echo "</table>";
     
    function formatText($chaine)
    {
    	$chaine = htmlentities($chaine, ENT_NOQUOTES, 'ISO-8859-1');
    	$chaine = preg_replace('#&([A-za-z])(?:acute|cedil|circ|grave|orn|ring|slash|th|tilde|uml);#', '\1', $chaine);
    	$chaine = preg_replace('#&([A-za-z]{2})(?:lig);#', '\1', $chaine); // pour les ligatures e.g. '&oelig;'
    	$chaine = preg_replace('#&[^;]+;#', '', $chaine); // supprime les autres caractères
    	$chaine = preg_replace('#,#','.',$chaine);
     
    	if($chaine == "")
    	{
    		$chaine = "non defini";
    	} else {
    		$chaine = strtolower($chaine);
    	}
     
    	return $chaine;
    }
    ?>

Discussions similaires

  1. Réponses: 0
    Dernier message: 05/03/2013, 11h47
  2. Réponses: 1
    Dernier message: 15/08/2011, 14h55
  3. [AJAX] Génération de menu déroulant contenant une tableau php
    Par emageren dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 18/04/2007, 11h46
  4. Réponses: 5
    Dernier message: 06/01/2007, 11h09
  5. Tableau croisé comme excel
    Par sunvialley dans le forum Access
    Réponses: 3
    Dernier message: 22/12/2006, 09h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo