Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1454 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Ranger les données de ma db à partir d'un clique

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Ranger les données de ma db à partir d'un clique

n°2464870
relphe
Posté le 27-02-2024 à 06:53:42  profilanswer
 

Bonjour,
 
Je bloque depuis plusieurs jours... Il y a vraisemblablement quelque chose que je ne comprends pas bien puisque l'exécution de mon code ne fonctionne pas : lorsque je clique sur une des options de mon sélect, je veux que la liste des livres de mon catalogue soit triée de A à Z ou du plus petit au plus grand, ou bien de Z à A ou du plus grand au plus petit (selon l'option sélectionnée).  
 
Ci-après, voici le contexte d'exécution :  
 
Je débute avec Django. J'ai créé une application nommée "books" qui se rattache à un projet "sgbj". Le template catalog.html de mon application est appelée par le template index.html de mon projet "sgbj". Donc l'url d'affichage de mon application "books" est la même que celle utilisée par mon projet "sgbj" :  
 

  • Mon ficher urls.py du projet "sgbj" :
Code :
  1. from django.contrib import admin
  2. from django.urls import path, include
  3. from books import views as books_views
  4. from . import views as project_views
  6. urlpatterns = [
  7.     path('admin/', admin.site.urls),
  8.     path('', books_views.catalog_view, name='index'),
  9.     path('contact/', project_views.contact_view, name='contact'),
  10.     path('publications/', include('articles.urls'), name='articles'),
  11. ]


 

  • Le fichier views.py du projet "sgbj" :  
Code :
  1. from django.shortcuts import render
  2. from books.views import catalog_view as books_catalog_view
  3. def index_view(request):
  4.     catalog_context = books_catalog_view(request)
  5.     books = catalog_context.get('catalog')
  6.     return render(request, 'index.html', {'catalog': books})


 

  • Le template index.html du projet "sgbj" :  
Code :
  1. {% extends 'template_base.html' %}
  3. {% block title %}Home_page{% endblock %}
  5. {% block content %}
  6.    
  7.     {% block catalog_content %}
  8.         <div id="catalog_content">
  9.             {% include 'catalog.html' %}
  10.         </div>
  11.     {% endblock %}
  13.     {% block sort_books %}
  14.     {% endblock %}
  16. {% endblock %}


 

  • Le template catalog.html de l'application "books":
Code :
  1. {% extends 'template_base.html' %}
  2. {% block title %}Catalog_page{% endblock %}
  4. {% block content %}
  6.     {% block sort_books %}
  7.         <div class="sort_books">
  8.             Tri par : 
  9.             <select id="sort_lastname" class="select_books sort_lastname" name="lastname">
  10.                 <option id="sort_lastname_author" class="sort_label" disabled selected hidden value="no_specific">auteur </option>
  11.                 <option id="sort_lastname_AZ" class="display_asc option_transparent" value="asc">A ... Z</option>
  12.                 <option id="sort_lastname_ZA" class="display_desc option_transparent" value="desc">Z ... A</option>
  13.             </select>
  14.             <select id="sort_title" class="select_books" name="titre">
  15.                 <option id="sort_title_title" class="sort_label" disabled selected hidden value="no_specific">titre </option>       
  16.                 <option id="sort_title_AZ" class="display_asc option_transparent" value="asc">A ... Z</option>
  17.                 <option id="sort_title_ZA" class="display_desc option_transparent" value="desc">Z ... A</option>
  18.             </select>
  19.             <select id="sort_date" class="select_books" name="date">
  20.                 <option id="sort_date_date" class="sort_label" disabled selected hidden value="no_specific">date </option>
  21.                 <option id="sort_date_-+" class="display_asc option_transparent" value="asc">- ... +</option>
  22.                 <option id="sort_date_+-" class="display_desc option_transparent" value="desc">+ ... -</option>
  23.             </select>
  24.         </div>
  25.     {% endblock %}
  27.     {% block catalog_title %}
  28.         <h1>Ma bibliothèque</h1>
  29.     {% endblock %}
  31.     {% for book in catalog %}
  32.         <p class="catalog">
  33.             <span class="lastname">{{ book.lastname }}</span>
  34.             <span class="firstname">{{ book.firstname }}</span>
  35.             <span class="title"><b>{{ book.title }}</b></span>
  36.             <span>ISBN : <span class="isbn">{{ book.isbn }}</span>
  37.         </p>
  38.     {% endfor %}
  40. {% endblock %}


 

  • La vue views.py de l'application "books" :
Code :
  1. from django.shortcuts import render
  2. from django.http import JsonResponse
  3. from django.db.models.functions import Lower
  4. from .models import Book
  6. def catalog_view(request):
  7.     books = Book.objects.all()
  8.     return render(request, 'books/catalog.html', {'catalog': books})
  10. def sort_books_view(request):
  11.     if request.is_ajax() and 'selected_option' in request.GET:
  12.         selected_column_option = request.GET.get('selected_option')
  13.         column_mapping = {
  14.             'sort_lastname_AZ': 'lastname',
  15.             'sort_lastname_ZA': '-lastname',
  16.             'sort_firstname_AZ': 'firstname',
  17.             'sort_firstname_ZA': '-firstname',
  18.             'sort_title_AZ': 'title',
  19.             'sort_title_ZA': '-title',
  20.             'sort_date_-+': Lower('date'),
  21.             'sort_date_+-': Lower('-date'),
  22.         }
  23.        
  24.         if selected_column_option in column_mapping:
  25.             sort_column = column_mapping[selected_column_option]
  26.             books = Book.objects.all().order_by(sort_column)
  27.             sorted_books = [{'lastname': book.lastname, 'firstname': book.firstname, 'title': book.title, 'isbn': book.isbn} for book in books]
  28.             return JsonResponse(sorted_books, safe=False)
  29.         else:
  30.             return JsonResponse({'error': 'Option de tri non valide.'})
  31.     else:
  32.         return JsonResponse({'error': 'Cette vue ne peut être appelée que via AJAX.'})


 

  • Mon script selector_books.js de l'application "books" (voir les lignes 54 à 91):
Code :
  1. document.addEventListener('DOMContentLoaded', function() {
  2.     var selectElements = document.querySelectorAll('#sort_lastname, #sort_firstname, #sort_title, #sort_date');
  3.     var defaultLabelOptions = {};
  5.     selectElements.forEach(function(selectElement) {
  6.         var defaultLabelOption = selectElement.querySelector('option');
  7.         defaultLabelOptions[selectElement.id] = defaultLabelOption.textContent;
  8.         defaultLabelOption.style.display = 'none';
  10.         selectElement.addEventListener('change', function() {
  11.             var selectedOption = this.options[this.selectedIndex];
  12.             var optionClass = selectedOption.getAttribute('class');
  13.             var optionText = selectedOption.textContent;
  15.             selectElements.forEach(function(otherSelect) {
  16.                 if (otherSelect !== selectElement) {
  17.                     var defaultOption = otherSelect.querySelector('option[value="no_specific"]');
  18.                     defaultOption.style.display = '';
  19.                     defaultOption.selected = true;
  20.                     otherSelect.querySelectorAll('option').forEach(function(option) {
  21.                         option.style.display = '';
  22.                     });
  23.                 }
  24.             });   
  26.             // Afficher toutes les options
  27.             var options = selectElement.querySelectorAll('option');
  28.             options.forEach(function(option) {
  29.                 option.style.display = '';   
  30.             });
  32.             // Cacher l'option sélectionnée
  33.             selectedOption.style.display = 'none';
  35.             if (optionClass === 'sort_label' || (optionText !== 'auteur A ... Z' && optionText !== 'auteur Z ... A' && optionText !== 'titre A ... Z' && optionText !== 'titre Z ... A' && optionText !== 'date - ... +' && optionText !== 'date + ... -')) {
  36.                 selectedOption.textContent = defaultLabelOptions[selectElement.id] + optionText;
  37.             }
  39.             // Masquer les options appropriées sans masquer l'élément sélectionné
  40.             if (optionClass === 'display_asc') {
  41.                 var descOptions = selectElement.parentNode.querySelectorAll('.display_desc');
  42.                 descOptions.forEach(function(option) {
  43.                     option.style.display = '';
  44.                 });
  45.             } else if (optionClass === 'display_desc') {
  46.                 var ascOptions = selectElement.parentNode.querySelectorAll('.display_asc');
  47.                 ascOptions.forEach(function(option) {
  48.                     option.style.display = '';
  49.                 });
  50.             }
  51.         });
  52.     });
  54.     $('#sort_lastname, #sort_firstname, #sort_title, #sort_date').on('change', function() {
  55.         var selectedOption = $(this).val();
  56.         if (selectedOption === "AZ" || selectedOption === "-+" || selectedOption === "ZA" || selectedOption === "+-" ) {
  57.             var dataToSend = {};
  58.             var selectedColumn = '';
  59.            
  60.             if ($(this).attr('id') === 'sort_lastname') {
  61.                 selectedColumn = 'lastname';
  62.                 dataToSend['selected_lastname_option'] = 'sort_' + selectedColumn + '_' + selectedOption.toUpperCase();
  63.                 dataToSend['selected_firstname_option'] = 'sort_firstname_' + selectedOption.toUpperCase();
  64.             } else if ($(this).attr('id') === 'sort_firstname') {
  65.                 selectedColumn = 'firstname';
  66.                 dataToSend['selected_firstname_option'] = 'sort_' + selectedColumn + '_' + selectedOption.toUpperCase();
  67.                 dataToSend['selected_lastname_option'] = 'sort_lastname_' + selectedOption.toUpperCase();
  68.             } else if ($(this).attr('id') === 'sort_title') {
  69.                 selectedColumn = 'title';
  70.             } else if ($(this).attr('id') === 'sort_date') {
  71.                 selectedColumn = 'date';
  72.             }
  73.            
  74.             $.ajax({
  75.                 url: '',
  76.                 data: dataToSend,
  77.                 dataType: 'json',
  78.                 success: function(data) {
  79.                     updateIndexData(data, selectedColumn);
  80.                 }
  81.             });
  82.         }
  83.     });
  85.     function updateIndexData(data, selectedColumn) {
  86.         $('#catalog_content .catalog p').each(function(index) {
  87.             $(this).find('.' + selectedColumn).text(data[index][selectedColumn]);
  88.             $(this).find('.isbn').text('ISBN : ' + data[index].isbn);
  89.         });
  90.     }
  91. });


 
 
L'affichage web en local fonctionnait bien avant que j'essaye de trier les données par ordre croissant/décroissant.
S'il vous plaît, j'espère que vous voudrez bien m'aider à identifier l'origine de la non exécution de mon code!


Message édité par relphe le 27-02-2024 à 10:14:31
mood
Publicité
Posté le 27-02-2024 à 06:53:42  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Ranger les données de ma db à partir d'un clique

 

Sujets relatifs
PHP/AJAX JQuery => Comment récupérer les données en PHP ?Synchronisation 2 bases de données PostgreSQL
Pourquoi lorsque je clique sur le bouton Start il desactive les Labels[Postgresql]Trigger à partir d'une liste
[Powershell]Manipuler des données dans une clé de registreHive accorde l'autorisation d'étendue de la base de données
Extraction de données d'un PDFScript bash/python extraire données bdd
[Powershell] [RESOLU] Lire caractères à partir du 17eme d'une chaineQuestion analyse/visualisation de données, niveau noob
Plus de sujets relatifs à : Ranger les données de ma db à partir d'un clique

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.106 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR