<div> <div class="sco_box_title">{{ titre }}</div> <div class="options-tableau"> {% if afficher_options != false %} <input type="checkbox" id="show_pres" name="show_pres" onclick="updateTableau()" {{'checked' if options.show_pres else ''}}> <label for="show_pres">afficher les présences</label> <input type="checkbox" id="show_reta" name="show_reta" onclick="updateTableau()" {{'checked' if options.show_reta else ''}}> <label for="show_reta">afficher les retards</label> <input type="checkbox" id="show_desc" name="show_desc" onclick="updateTableau()" {{'checked' if options.show_desc else ''}}> <label for="with_desc">afficher les descriptions</label> <a style="margin-left:32px;" href="{{request.url}}&fmt=xlsx">{{scu.ICON_XLS|safe}}</a> <br> {% endif %} <label for="nb_ligne_page">Nombre de lignes par page :</label> <select name="nb_ligne_page" id="nb_ligne_page" onchange="updateTableau()"> {% for i in [25,50,100,1000] %} {% if i == options.nb_ligne_page %} <option selected value="{{i}}">{{i}}</option> {% else %} <option value="{{i}}">{{i}}</option> {% endif %} {% endfor %} </select> <br> </div> <div class="div-tableau"> <div class="options-tableau"> <!--Pagination basée sur : https://app.uxcel.com/courses/ui-components-best-practices/best-practices-005 --> <!-- Mettre les flèches --> {% if total_pages > 1 %} <ul class="pagination"> <li class=""> <a onclick="navigateToPage({{options.page - 1}})"><</a> </li> <!-- Toujours afficher la première page --> <li class="{% if options.page == 1 %}active{% endif %}"> <a onclick="navigateToPage({{1}})">1</a> </li> <!-- Afficher les ellipses si la page courante est supérieure à 2 --> <!-- et qu'il y a plus d'une page entre le 1 et la page courante-1 --> {% if options.page > 2 and (options.page - 1) - 1 > 1 %} <li class="disabled"><span>...</span></li> {% endif %} <!-- Afficher la page précédente, la page courante, et la page suivante --> {% for i in range(options.page - 1, options.page + 2) %} {% if i > 1 and i < total_pages %} <li class="{% if options.page == i %}active{% endif %}"> <a onclick="navigateToPage({{i}})">{{ i }}</a> </li> {% endif %} {% endfor %} <!-- Afficher les ellipses si la page courante est inférieure à l'avant-dernière page --> <!-- et qu'il y a plus d'une page entre le total_pages et la page courante+1 --> {% if options.page < total_pages - 1 and total_pages - (options.page + 1 ) > 1 %} <li class="disabled"><span>...</span></li> {% endif %} <!-- Toujours afficher la dernière page --> <li class="{% if options.page == total_pages %}active{% endif %}"> <a onclick="navigateToPage({{total_pages}})">{{ total_pages }}</a> </li> <li class=""> <a onclick="navigateToPage({{options.page + 1}})">></a> </li> </ul> {% else %} <!-- Afficher un seul bouton si il n'y a qu'une seule page --> <ul class="pagination"> <li class="active"><a onclick="navigateToPage({{1}})">1</a></li> </ul> {% endif %} </div> {{table.html() | safe}} <div class="options-tableau"> <!--Pagination basée sur : https://app.uxcel.com/courses/ui-components-best-practices/best-practices-005 --> <!-- Mettre les flèches --> {% if total_pages > 1 %} <ul class="pagination"> <li class=""> <a onclick="navigateToPage({{options.page - 1}})"><</a> </li> <!-- Toujours afficher la première page --> <li class="{% if options.page == 1 %}active{% endif %}"> <a onclick="navigateToPage({{1}})">1</a> </li> <!-- Afficher les ellipses si la page courante est supérieure à 2 --> <!-- et qu'il y a plus d'une page entre le 1 et la page courante-1 --> {% if options.page > 2 and (options.page - 1) - 1 > 1 %} <li class="disabled"><span>...</span></li> {% endif %} <!-- Afficher la page précédente, la page courante, et la page suivante --> {% for i in range(options.page - 1, options.page + 2) %} {% if i > 1 and i < total_pages %} <li class="{% if options.page == i %}active{% endif %}"> <a onclick="navigateToPage({{i}})">{{ i }}</a> </li> {% endif %} {% endfor %} <!-- Afficher les ellipses si la page courante est inférieure à l'avant-dernière page --> <!-- et qu'il y a plus d'une page entre le total_pages et la page courante+1 --> {% if options.page < total_pages - 1 and total_pages - (options.page + 1 ) > 1 %} <li class="disabled"><span>...</span></li> {% endif %} <!-- Toujours afficher la dernière page --> <li class="{% if options.page == total_pages %}active{% endif %}"> <a onclick="navigateToPage({{total_pages}})">{{ total_pages }}</a> </li> <li class=""> <a onclick="navigateToPage({{options.page + 1}})">></a> </li> </ul> {% else %} <!-- Afficher un seul bouton si il n'y a qu'une seule page --> <ul class="pagination"> <li class="active"><a onclick="navigateToPage({{1}})">1</a></li> </ul> {% endif %} </div> </div> </div> <script> function updateTableau() { const url = new URL(location.href); const formValues = document.querySelectorAll(".options-tableau *[name]"); formValues.forEach((el) => { if (el.type == "checkbox") { url.searchParams.set(el.name, el.checked) } else { url.searchParams.set(el.name, el.value) } }) if (!url.href.endsWith("#options-tableau")) { location.href = url.href + "#options-tableau"; } else { location.href = url.href; } } const total_pages = {{total_pages}}; function navigateToPage(pageNumber){ if(pageNumber > total_pages || pageNumber < 1) return; const url = new URL(location.href); url.searchParams.set("n_page", pageNumber) if (!url.href.endsWith("#options-tableau")) { location.href = url.href + "#options-tableau"; } else { location.href = url.href; } } window.addEventListener('load', ()=>{ const table_columns = [...document.querySelectorAll('.external-sort')]; table_columns.forEach((e)=>e.addEventListener('click', ()=>{ // récupération de l'ordre "ascending" / "descending" let order = e.ariaSort; // récupération de la colonne à ordonner // il faut avoir une classe `external-type:<NOM COL>` let order_col = e.className.split(" ").find((e)=>e.indexOf("external-type:") != -1); //Création de la nouvelle url avec le tri const url = new URL(location.href); url.searchParams.set("order", order); url.searchParams.set("order_col", order_col.split(":")[1]); location.href = url.href })); }); </script> <style> .small-font { font-size: 9pt; } .div-tableau{ display: flex; flex-direction: column; align-items: center; max-width: fit-content; } .pagination li{ cursor: pointer; } </style>