Slider JQuery UI
Résolu
Takumi1991
Messages postés
2
Statut
Membre
-
Takumi1991 Messages postés 2 Statut Membre -
Takumi1991 Messages postés 2 Statut Membre -
Bonjour à tous,
pour un projet universitaire je dois réaliser l'affichage dynamique d'une base de données sur un site web. Les résultats sont affichés sous forme d'un tableau dont les colonnes peuvent être triées par ordre croissant ou décroissant (j'ai utilisé pour ça le plug-in Database pour JQuery disponible ici: https://www.datatables.net/ ). Jusqu'ici, pas de problème.
Pour le côté dynamique, j'ai pensé à réaliser des sliders sur chaque champs afin de permettre à l'utilisateur de sélectionner une "fourchette" de résultat. Pour ce faire j'ai utilisé le plug-in Slider de JQuery UI. De plus, les sliders sont dynamiques, au chargement de la page et du tableau de résultat, chaque slider récupère la valeur minimale et maximale de son champs. Et c'est là que le problème commence: quand la page est chargée, les sliders fonctionnent parfaitement. Cependant si l'utilisateur décide d'abord de trier les données, les sliders ne fonctionnent plus, à savoir que les valeurs des sliders peuvent être modifiées mais cela n'agit plus sur le tableau.
Ci-dessous mon code. Pour simplifier, je n'ai fait apparaître qu'un champs du tableau.
La création du tableau:
La création d'un des sliders:
Extrait du code javascript:
Je vous remercie d'avance de l'aide que vous pourrez m'apporter.
pour un projet universitaire je dois réaliser l'affichage dynamique d'une base de données sur un site web. Les résultats sont affichés sous forme d'un tableau dont les colonnes peuvent être triées par ordre croissant ou décroissant (j'ai utilisé pour ça le plug-in Database pour JQuery disponible ici: https://www.datatables.net/ ). Jusqu'ici, pas de problème.
Pour le côté dynamique, j'ai pensé à réaliser des sliders sur chaque champs afin de permettre à l'utilisateur de sélectionner une "fourchette" de résultat. Pour ce faire j'ai utilisé le plug-in Slider de JQuery UI. De plus, les sliders sont dynamiques, au chargement de la page et du tableau de résultat, chaque slider récupère la valeur minimale et maximale de son champs. Et c'est là que le problème commence: quand la page est chargée, les sliders fonctionnent parfaitement. Cependant si l'utilisateur décide d'abord de trier les données, les sliders ne fonctionnent plus, à savoir que les valeurs des sliders peuvent être modifiées mais cela n'agit plus sur le tableau.
Ci-dessous mon code. Pour simplifier, je n'ai fait apparaître qu'un champs du tableau.
La création du tableau:
/*...*/ $max_AGE = 0; /*...*/ $min_AGE = 0; /*...*/ while ($donnees = $reponse->fetch()) {?> <tr class="<?php echo $donnees['Libelle'];?>" onMouseOver="changeCouleur(this);" onMouseOut="remetCouleur(this);" style="background-color:#fff";> /*...*/ <td class='AGE' id='<?php echo 'id_AGE_'.$donnees['Libelle'] ?>'><?php echo $donnees['AGE']?></td> /*...*/ </tr> <?php }?> </tbody> </table> </article> <?php $res = $bdd->query('SELECT max(AGE), min(AGE) FROM results, methods,sequences, scores WHERE sequences.id_sequence='.$_GET['sequence'].' AND results.id_method = methods.id_method AND results.id_sequence=sequences.id_sequence AND results.id_score=scores.id_score'); $data = $res->fetch(); ?> <span id='min_AGE' style='display:none'><?php echo $min_AGE = $data['min(AGE)']-0.1 ?></span> <span id='max_AGE' style='display:none'><?php echo $max_AGE = $data['max(AGE)']+0.1 ?></span>
La création d'un des sliders:
<form id="form"> <!-- .... --> <h5>AGE:</h5> <div id="bornes">From <span id="AGE_min"></span> to <span id="AGE_max"></span></div> <div id="slider_AGE"></div> <!-- ...--> </form>
Extrait du code javascript:
// Création d'un slider dans l'élément id slider $("#slider_AGE").slider({ range: true, step: 0.01, min: parseFloat(document.getElementById('min_AGE').innerText), // valeur min max: document.getElementById('max_AGE').innerText, // valeur max values: [document.getElementById('min_AGE').innerText, document.getElementById('max_AGE').innerText], // position des 2 curseurs à l'initialisation // Action à effectuer lorsqu'on déplace l'un des curseur slide: function(event, ui){ $('#AGE_min').html(ui.values[0]); $('#AGE_max').html(ui.values[1]); var choix=document.getElementsByClassName('AGE'); for (i=0;i<choix.length;i++) { if(choix[i].innerText < ui.values[0] || choix[i].innerText > ui.values[1]) { options[choix[i].parentNode.className]["AGE"] = 0; choix[i].parentNode.style.display="none"; } if(choix[i].innerText > ui.values[0] && choix[i].innerText < ui.values[1]) { var state = 0; options[choix[i].parentNode.className]["AGE"] = 1; for(var el in options[choix[i].parentNode.className]) { if(options[choix[i].parentNode.className][el] === 0) { state = 1; } } if(state === 0) { choix[i].parentNode.style.display="table-row"; } } } } }); // Initialisation des valeurs numériques au chargement de la page $('#AGE_min').html($("#slider_AGE").slider("values", 0)); $('#AGE_max').html($("#slider_AGE").slider("values", 1));
Je vous remercie d'avance de l'aide que vous pourrez m'apporter.
A voir également:
- Slider JQuery UI
- One ui - Guide
- Uniget ui - Télécharger - Divers Utilitaires
- Realme ui 4.0 - Accueil - Guide téléphones
- Wow slider - Télécharger - Présentation
- Tweak ui - Télécharger - Personnalisation