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

JavaScript Discussion :

Trier une liste de résultats


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Webdesigner
    Inscrit en
    Octobre 2014
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2014
    Messages : 21
    Par défaut Trier une liste de résultats
    Bonjour, à toutes et à tous.

    Mon problème du jour est de trier une liste de résultats d'une recherche de volets d'une saga cinématographique par ordre croissant du numéro des volets.

    Pour l'instant, j'ai une page et un JavaScript qui fonctionnent pour afficher une liste de films vus par année. La liste des films est affichée dans l'ordre de visionnage et donc de haut en bas, dans l'ordre chronologique, dans ma base de données locale.
    J'aimerais pouvoir faire la même chose avec une saga, dont je n'aurais hélas pas vu les volets dans l'ordre, du genre d'abord le volet 2, puis le 3 et enfin le 1er.

    Exemple pour bien expliquer :

    Saga L'arme fatale enregistrée par ordre de visionnage dans la base de données locale :
    1. L'arme fatale 2 (vu le 01.01.2024)
    2. L'arme fatale 4 (vu le 01.02.2024)
    3. L'arme fatale (vu le 01.03.2024)
    4. L'arme fatale 3 (vu le 01.04.2024)


    Résultat de l'affichage des volets de la saga dans l'ordre croissant, c'est ce que j'aimerais obtenir :

    Saga L'arme fatale :
    1. 01 : L'arme fatale
    2. 02 : L'arme fatale 2
    3. 03 : L'arme fatale 3
    4. 04 : L'arme fatale 4



    Voici le code de la page HTML, adaptée pour l'objectif recherché, qui affiche cette liste de volets d'une saga :

    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
    <html><head><title>Liste des volets de la saga</title>
    <script type="text/javascript" src="scripts/bdjs.js"></script>
    <link type="text/css" rel="stylesheet" media="screen" title="Style" href="scripts/style.css" /></head><body>
    <div id="Entete"><script type="text/javascript">AfficheEntete()</script></div>
    <div id="Titre3"><a href='filmsvus.html'><script type="text/javascript">AfficheTitreListe()</script></a></div>
    <!-- Début de la liste des volets de la saga -->
    <div id="Centre7"><div id="Centre8">
    <!-- Début du div de l'affichage des résultats de la recherche -->
    <div id="Descriptions"><a name="_top"></a><script type="text/javascript">SearchItem2()</script></div>
    <!-- Fin du div de l'affichage des résultats de la recherche -->
    <br /></div></div>
    <!-- Fin de la liste des volets de la saga -->
    <div id="BarreDeBoutons2"><input type="button" name="bouton" style="width:50px" value="Retour" onclick="history.go(-1);return(false)"></div>
    <div id="Copyright"><script type="text/javascript">AfficheCopyright()</script></div>
    <div id="BarreDeBoutons1"><script type="text/javascript">AfficheBarreDeBoutons()</script></div>
    </body></html>

    Et voici le JS contenu dans le fichier " bdjs.js " (je n'ai évidemment pas mis le fichier en entier, qui contient toute la base de données locale et tous les 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
    // Initialisation de la base de données et création des éléments de la base de données.
     
    var tjs_base=new TJS_InitBase("_self");
     
    // Voici un exemple pour un film vu, 1 ligne tjs_base.Add(" ... "); alimentée par de nombreuses variables en amont, qui sont des informations sur le film vu et plein de mots-clés concernant le film, parmi lesquels le moteur de recherche pourra puiser pour l'afficher selon un mot-clé contenu en paramètre dans une URL.
     
    var FilmVuLe004_2024="04.02.2024";
    var LieuDeVisionnage004_2024="à la télévision";
    var FilmVuAvec004_2024="ma Chérie";
    var TitreFr004_2024="Maya l'abeille 2 : Les Jeux du miel";
    var TitreOr004_2024="Die Biene Maja 2 - Die Honigspiele";
    var Realisateur004_2024="Noel Cleary et Sergio Delfino";
    var Compositeur004_2024="Ute Engelhardt";
    var ProduitEn004_2024="2017";
    var SortieEnFranceLe004_2024="18.07.2018";
    var Duree004_2024="01h26";
    var Vu004_2024="en 2D";
    var Histoire004_2024="adaptée des romans Die Biene Maja und ihre Abenteuer (Maya l'abeille et ses aventures) (1912), et Himmelsvolk (Peuple du ciel) (1915), de Waldemar Bonsels";
    var FilmPossede004_2024="DVD";
    var BOPossedee004_2024="Non";
    var Notation004_2024="<img src='images/EtoileNotation2.png' class='EtoilesNotation' title='Pas mal'>";
    var ActeurPrincipal004_2024="";
    var ActricePrincipale004_2024="";
    var Synopsis004_2024="Maya participe enfin aux Grands Jeux du Miel. L'enjeu est de taille : Maya doit absolument gagner, sinon elle devra livrer tout le miel de sa ruche à l'Impératrice, qui n'est autre que la sœur de la Reine de sa ruche. Maya, Willy et les membres de leur équipe vont devoir se surpasser pour battre l'équipe de Violette, une adversaire aussi rusée et maligne que mauvaise joueuse…";
    var Casting004_2024="<span class=\"texte3\">Film d'animation</span>";
    var CastingOuEt004_2024="Film d'animation";
    var VoletSaga004_2024="02";
    var Saga004_2024="Volets : "+nbvolsaga528+"&nbsp;&nbsp;-&nbsp;&nbsp;<a href='fichefilm.html?numerodefilm=038_2017'><img src='images/fleche3.gif' class='BoutonsSaga' /></a> N°"+VoletSaga004_2024+" <a href='fichefilm.html?numerodefilm=0001_2024'><img src='images/fleche1.gif' class='BoutonsSaga' /></a>";
    var TitreSaga004_2024=titresaga528;
    var AnneeEtTypeDeFilm004_2024="2024CF";
    var TypeFilm004_2024="Cinéfilm";
     
    tjs_base.Add("fichefilm.html?numerodefilm=004_2024","<img src='images/affiches/004_2024.jpg' class='affiche' />","<span class='desc'><b>004 - "+FilmVuLe004_2024+" :</b> "+TitreFr004_2024+" ("+TitreOr004_2024+") - "+ProduitEn004_2024+" - "+TypeFilm004_2024+"</span>","<span class='infos'><b>Réalisateur(s) :</b> "+Realisateur004_2024+"<br /><b>Casting :</b> "+ActeurPrincipal004_2024+" "+CastingOuEt004_2024+" "+ActricePrincipale004_2024+"<br />Vu "+LieuDeVisionnage004_2024+"</span>"," "+TitreSaga004_2024+" "+VoletSaga004_2024+" "+AnneeEtTypeDeFilm004_2024+" "+FilmVuLe004_2024+" "+TitreFr004_2024+" "+TitreOr004_2024+" "+ProduitEn004_2024+" "+SortieEnFranceLe004_2024+" "+Realisateur004_2024+" "+Compositeur004_2024+" "+LieuDeVisionnage004_2024+" "+Casting004_2024+" ");
     
     
    // Scripts du chercheur-afficheur de cinéfilms et vidéofilms vus par année.
     
    // Script d'initialisation et de création des éléments de la base de données.
    // Lié à la base de données, qui précède la liste des scripts.
     
    function TJS_InitBase(target)
    {
    this.nb_item=0; this.target=target; this.Add=AddItem; this.Search=SearchItem;
    }
     
     
    // Script définissant les différents éléments contenus dans les résultats éventuels (affichés dans le div Descriptions).
     
    function AddItem(page,image,desc,infos,cle)
    {
    var nb = this.nb_item; var item = new Object; item.page=page; item.image=image; item.desc=desc; item.infos=infos; item.cle=cle; this[nb]=item; this.nb_item++;
    }
     
     
    // Script de récupération de "anneetype" dans les liens du récapitulatif des cinéfilms/vidéofilms vus par année.
    // Créé par Patrick Manzoni le 23.05.2024.
     
    function anneeEtType(param)
    {
    var chaine=window.location.search;
    chaine=chaine.substring(1);
    var dz=chaine.indexOf("#",0);
    if(dz!=-1) {
    chaine=chaine.substring(0,dz);}
    chaine=chaine+"&";
    if(chaine.indexOf(param,0)!=-1){
    pos=chaine.indexOf(param,0);
    var pos2=chaine.indexOf("=",pos);
    var pos3=chaine.indexOf("&",pos);
    contenu=chaine.substring(pos2+1,pos3);}
    return contenu;
    }
     
     
    // Script de recherche et d'affichage de la liste des résultats dans le div Descriptions.
     
    function SearchItem2(at)
    {
    var at = anneeEtType("anneetype"); // Valeur "anneetype" dans l'URL.
    at = unescape(at);
    at = at.replace(/\+/g," ");
    var n=tjs_base.nb_item;
    var indice=-1;
    {
    var Z=""; var nb=0;
    for (var i=0; i<n; i++)
    {
    if (tjs_base[i].cle.toUpperCase().indexOf(at.toUpperCase(),0)!="-1")
    {
    Z+="<div id='CadreReponse'> "+tjs_base[i].image+" <a href='"+tjs_base[i].page+"' target='"+tjs_base.target+"'> "+tjs_base[i].desc+"</a>" +tjs_base[i].infos+ "<a href='#_top' title='Retour au sommet de la page'><img src='images/fleche2.gif' class='FlechesResultats' /></a></div>";
    nb++;
    }
    }
    document.write(Z);
    }
    }
    Précision :

    Pour afficher cette liste de résultats, sur une autre page HTML précédente, on a cliqué sur un lien et, dans son URL, il y a un paramètre " anneetype " (on en créera un autre pour la saga, " numsaga "), qui est récupéré par un JS. Donc, dans la base de données locale, il y a une longue liste de lignes tjs_base.Add(" ... "); , comme celle de l'exemple donné, qui sont autant de films vus. Le moteur de recherche regarde toutes ces lignes et n'affichent pour résultats que celles dont un mot-clé correspond à celui de la recherche, dans ce cas le numéro de la saga. Dans les résultats affichés, les volets de la saga, on a le numéro, le titre, le réalisateur, la durée, etc... de chacun.

    Je pense que la modification à apporter, pour obtenir le résultat voulu, se situe au niveau de la dernière partie, la fonction SearchItem2 et son " document.write " qui affiche sur la page HTML la liste des résultats.
    Je pense qu'il faudra aussi, avant tout, ajouter la variable " VoletSaga004_2024 ", dans l' " item cle " du tjs_base.Add(" ... "); , je l'ai déjà fait dans l'exemple donné, qui attribue au volet de la saga un numéro, afin que la fonction JS s'en serve pour effectuer le tri. Il faudrait donc que la fonction SearchItem2 modifiée regarde la valeur " VoletSaga " des résultats affichés pour les trier dans l'ordre. J'espère que c'est possible... mais cela me semble compliqué.

    En vous remerciant d'avance pour votre précieuse aide, je vous souhaite un bon week-end. A bientôt.

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 668
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 668
    Par défaut
    si vous avez la date de sortie de chaque film, je pense que vous pourrez utilisez cette information pour faire le tri des films.

    je me demande comment vous saisissez un nouveau film ? si c'est en modifiant le fichier javascript, je vous conseille de plutot stocker cela sous la forme d'objets javascript pour éviter les erreurs de saisie des différentes variables.

  3. #3
    Membre averti
    Homme Profil pro
    Webdesigner
    Inscrit en
    Octobre 2014
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2014
    Messages : 21
    Par défaut
    Bonjour, Mathieu.

    Non, la date de sortie des volets d'une saga n'est hélas pas la bonne solution... La faute aux préquelles, des volets qui sortent après plusieurs volets, mais qui chronologiquement se passent avant l'histoire racontée dans le premier volet sorti... C'est devenu très courant ces dernières années. Par exemple, dans la saga Destination finale, le 5ème volet sorti en 2011 est devenu le nouveau 1er volet, parce que son histoire se passe avant le premier film sorti au cinéma en 2000... Et des exemples similaires, il y en a beaucoup... Idem avec Kingsman : le 3ème sorti se passe avant le 1er.

    Pour saisir un nouveau film, c'est là tout mon problème... Oui, j'ajoute les nouveaux films vus dans le fichier bdjs.js, qui contient toute la BDD et les JS. J'ai créé une page Ajouter, qui permet de rentrer toutes les informations du film dans les champs de la future fiche du film (en parallèle, je travaille aussi sur un moteur de recherche qui récolte les données du film sur l'API du site TMDB), puis, en cliquant sur un bouton, les lignes de variables du film sont créées et copiées dans le presse-papier. Il ne me reste plus qu'à faire un coller dans le fichier, à la suite du film précédemment vu, et de copier l'affiche du film dans le sous-dossier "affiches " du dossier " images ".
    J'ai vu qu'il serait possible de simplifier cela avec JQuery et JSON, mais je ne maîtrise pas du tout cela...

    Pour votre solution d'objets javascript, auriez-vous un exemple, SVP ? Vu que je suis en train de modifier toute ma BDD pour la création de la nouvelle version 7.0 de ma liste de films vus, je ne suis plus à cela près... Je peux encore changer des choses.

    Bon dimanche.

  4. #4
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 668
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 668
    Par défaut
    au sujet de jquery, c'est une bibliothèque qui permettait de simplifier le développement dans les anciens navigateurs mais elle n'est plus très utile avec les navigateurs actuels.

    pour le format de stockage des données, vous pouvez faire cela :
    Code javascript : 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
    const bdd = [
    	{
    		"titre" : "Maya l'abeille 2 : Les Jeux du miel",
    		"saga" : "Maya l'abeille",
    		"volet_saga" : "2",
    		...
    	}
    	,{
    		"titre" : "Maya l'abeille ...",
    		"saga" : "Maya l'abeille",
    		"volet_saga" : "1",
    		...
    	}
     
     
    ];

    pour avoir une interface plus pratique pour ajouter des films, vous aurez besoin d'un langage de programmation côté serveur comme PHP ou node.js.
    si vous hébergez cette application sur votre ordinateur, peut-être que node.js est le plus pratique pour vous puisqu'il s'agit de javascript côté serveur.

  5. #5
    Membre averti
    Homme Profil pro
    Webdesigner
    Inscrit en
    Octobre 2014
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2014
    Messages : 21
    Par défaut
    Citation Envoyé par mathieu Voir le message
    au sujet de jquery, c'est une bibliothèque qui permettait de simplifier le développement dans les anciens navigateurs mais elle n'est plus très utile avec les navigateurs actuels.

    pour le format de stockage des données, vous pouvez faire cela :

    pour avoir une interface plus pratique pour ajouter des films, vous aurez besoin d'un langage de programmation côté serveur comme PHP ou node.js.
    si vous hébergez cette application sur votre ordinateur, peut-être que node.js est le plus pratique pour vous puisqu'il s'agit de javascript côté serveur.
    Mathieu, merci pour les informations sur JQuery. J'en suis étonné, car j'ai trouvé encore beaucoup de projets/sites qui s'en servent... Et, d'après les informations que j'ai trouvées, cela sert aussi pour des applications et exécutables en locale avec un fichier JSON, qui pourrait être ma nouvelle BDD.

    En attendant votre réponse, je me suis informé sur les objets javascript et c'est donc ce à quoi je m'attendais. Merci pour l'exemple. Niveau code, je ne vois pas plus de clareté et simplification... De plus, la question que je me pose alors, c'est comment mon moteur de recherche va aller puiser dans ces objets JS les variables correspondant aux mot-clés saisis pour afficher les films recherchés ? Cela me paraît compliqué aussi...

    Je maîtrise le PHP, mais je n'ai pas envie de passer par un serveur. Mon application est 100% locale, stockée sur un disque dur.

    Du coup, hélas, vous n'avez pas de solution pour modifier mon JS afin de faire un classement... Dommage. Je vais continuer à chercher une solution... En attendant, la seule solution que j'ai est de créer une page par saga... et il y en a beaucoup des sagas !

    Bonne journée.

  6. #6
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 668
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 668
    Par défaut
    Citation Envoyé par pat_fr38 Voir le message
    J'en suis étonné, car j'ai trouvé encore beaucoup de projets/sites qui s'en servent...
    jquery fonctionne toujours bien et il est régulièrement mis à jour. avec le temps cela devient juste une bibliothèque de plus en plus légère puisque cela fini par être un simple proxy.

    Citation Envoyé par pat_fr38 Voir le message
    cela sert aussi pour des applications et exécutables en locale avec un fichier JSON, qui pourrait être ma nouvelle BDD.
    les requêtes http sont aussi faisables en javascript directement
    https://developer.mozilla.org/fr/doc.../fetch#exemple

    Citation Envoyé par pat_fr38 Voir le message
    En attendant, la seule solution que j'ai est de créer une page par saga...
    vous voulez dire "un fichier par saga" ? vous n'avez pas besoin de cela.
    à partir de la liste des films, vous pouvez faire une boucle qui va choisir la saga à afficher
    https://developer.mozilla.org/fr/doc.../Array/forEach
    la saga peut se choisir par un clic dans une liste ou aussi en passant un argument dans l'url
    https://developer.mozilla.org/fr/doc...arams#exemples

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Trier une liste chainée.
    Par gregb34 dans le forum Algorithmes et structures de données
    Réponses: 5
    Dernier message: 21/05/2006, 22h05
  2. Trier une liste de dossiers et de fichiers
    Par steveleg dans le forum Langage
    Réponses: 2
    Dernier message: 07/04/2006, 16h54
  3. trier une list
    Par elekis dans le forum C++
    Réponses: 4
    Dernier message: 23/03/2006, 12h01
  4. [c#] Trier une liste de nombres liés.
    Par Joad dans le forum ASP.NET
    Réponses: 13
    Dernier message: 11/05/2005, 11h17
  5. [Debutant(e)]Trier une liste
    Par LeDébutantJava dans le forum Collection et Stream
    Réponses: 8
    Dernier message: 19/08/2004, 12h44

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