Commit 7623c8e0 authored by Mat's avatar Mat

inplémente le tri du tableau (cours JS, jour3)

parent 210f15b4
......@@ -6,15 +6,30 @@
{% block body %}
<h2>{{ block('title') }}</h2>
<table class="table associations">
<table id="maintab" class="table associations">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nom</th>
<th scope="col">Objet Social</th>
<th scope="col">Email</th>
<th scope="col">n° TVA</th>
<th scope="col">Membres</th>
<th scope="col">Nom
<a href="#" class="btn-tri" id="btncol0_asc"><i class="fa fa-caret-down"></i></a>
<a href="#" class="btn-tri" id="btncol0_desc"><i class="fa fa-caret-up"></i></a>
</th>
<th scope="col">Objet Social
<a href="#" class="btn-tri" id="btncol1_asc"><i class="fa fa-caret-down"></i></a>
<a href="#" class="btn-tri" id="btncol1_desc"><i class="fa fa-caret-up"></i></a>
</th>
<th scope="col">Email
<a href="#" class="btn-tri" id="btncol2_asc"><i class="fa fa-caret-down"></i></a>
<a href="#" class="btn-tri" id="btncol2_desc"><i class="fa fa-caret-up"></i></a>
</th>
<th scope="col">TVA
<a href="#" class="btn-tri" id="btncol3_asc"><i class="fa fa-caret-down"></i></a>
<a href="#" class="btn-tri" id="btncol3_desc"><i class="fa fa-caret-up"></i></a>
</th>
<th scope="col">Membres
<a href="#" class="btn-tri" id="btncol4_asc"><i class="fa fa-caret-down"></i></a>
<a href="#" class="btn-tri" id="btncol4_desc"><i class="fa fa-caret-up"></i></a>
</th>
<th scope="col">Action</th>
</tr>
</thead>
......@@ -54,7 +69,8 @@
</div>
</div>
{% else %}
<a class="btn btn-danger btn-sm disabled" tabindex="-1" role="button" aria-disabled="true">Effacer</a>
<a class="btn btn-danger btn-sm disabled" tabindex="-1" role="button" aria-disabled="true"
title="L'association contient encore des membres">Effacer</a>
{% endif %}
</td>
</tr>
......
......@@ -6,14 +6,26 @@
{% block body %}
<h2>{{ block('title') }}</h2>
<table class="table membres">
<table id="maintab" class="table membres">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nom</th>
<th scope="col">Prenom</th>
<th scope="col">Email</th>
<th scope="col">Association</th>
<th scope="col">Nom
<a href="#" class="btn-tri" id="btncol0_asc"><i class="fa fa-caret-down"></i></a>
<a href="#" class="btn-tri" id="btncol0_desc"><i class="fa fa-caret-up"></i></a>
</th>
<th scope="col">Prenom
<a href="#" class="btn-tri" id="btncol1_asc"><i class="fa fa-caret-down"></i></a>
<a href="#" class="btn-tri" id="btncol1_desc"><i class="fa fa-caret-up"></i></a>
</th>
<th scope="col">Email
<a href="#" class="btn-tri" id="btncol2_asc"><i class="fa fa-caret-down"></i></a>
<a href="#" class="btn-tri" id="btncol2_desc"><i class="fa fa-caret-up"></i></a>
</th>
<th scope="col">Association
<a href="#" class="btn-tri" id="btncol3_asc"><i class="fa fa-caret-down"></i></a>
<a href="#" class="btn-tri" id="btncol3_desc"><i class="fa fa-caret-up"></i></a>
</th>
<th scope="col">Action</th>
</tr>
</thead>
......
let xkjhjh;
// 1
let dropbtns = document.querySelectorAll("table.table a.btn-danger:not(.disabled)");
for (let bouton of dropbtns)
{
......@@ -11,3 +11,76 @@ for (let bouton of dropbtns)
});
}
}
// 2
function ASC (a, b) {
a = a[1];
b = b[1];
if (a > b) {
return 1;
} else if (a < b) {
return -1;
} else {
return 0;
}
}
function DESC (a, b) {
a = a[1];
b = b[1];
if (a > b) {
return -1;
} else if (a < b) {
return 1;
} else {
return 0;
}
}
function sortTable(table, col, tri) {
// la zone à trier
let tbody = document.getElementById(table).getElementsByTagName('tbody')[0];
// une liste des rangées
let rows = tbody.getElementsByTagName('tr');
// crée un nouveau tableau vide
let resort = new Array();
// boucle pour y empiler les données triées
for (let row of rows) {
let sortcol = row.getElementsByTagName('td')[col].innerHTML;
resort.push([row, sortcol]);
}
// trie le tableau selon la fonction ASC ou DESC
if (tri === 'ASC') {
resort.sort(ASC);
}
if (tri === 'DESC') {
resort.sort(DESC);
}
// injecte les rangées triées
for (var i = 0; i < resort.length; i++) {
tbody.appendChild(resort[i][0]);
}
}
// boucle sur les boutons
let buttons = document.querySelectorAll('a.btn-tri');
for (let btn of buttons) {
// quand on clique sur un bouton
btn.addEventListener("click", function(){
// l'id du bouton permet de calculer la colonne et le mode de tri
let col = btn.getAttribute('id').replace("btncol","").split("_")[0];
let tri = btn.getAttribute('id').replace("btncol","").split("_")[1].toUpperCase();
// appelle la fonction
sortTable('maintab', col, tri);
});
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment