ScoDoc/app/templates/assiduites/widgets/tableau.j2

<div class="assi-tableau">
    <div class="scobox-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>
        <label for="annee_sco">Année scolaire :</label>
        <select name="annee_sco" id="annee_sco" onchange="updateTableau()">
            <option value="-1">Tout afficher</option>
            {% for annee in range(scu.annee_scolaire(), scu.annee_scolaire()-6, -1) %}
                {% if annee == options.annee_sco or (options.annee_sco == None and annee == scu.annee_scolaire()) %}
                <option value="{{annee}}" selected>
                    {{annee}} - {{annee + 1}}
                </option>
                {% else %}
                <option value="{{annee}}">
                    {{annee}} - {{annee + 1}}
                </option>
                {% endif %}
            {% endfor %}
        </select>
        <br>
        {% if moduleimpl_select %}
            <label for="moduleimpl_select">
                Filtrage du module
                {{moduleimpl_select | safe}}
            </label>
        {% endif %}
        <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="{{'disabled' if options.page == 1 else ''}}">
                    <a onclick="navigateToPage({{options.page - 1}})">&lt;</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="{{'disabled' if options.page == total_pages else ''}}">
                    <a onclick="navigateToPage({{options.page + 1}})">&gt;</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}})">&lt;</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}})">&gt;</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>
    // Fonction pour mettre à jour l'url avec les options du tableau
    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}};
    // Fonction pour naviguer entre les pages, modifie le champ n_page de l'url
    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;
        }

    }
    // Préparation des opérations de trai sur les colonnes "external-sort"
    window.addEventListener('load', ()=>{
        const table_columns = [...document.querySelectorAll('th.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;

        }));

        const selecteur = document.querySelector("#moduleimpl_select");
        selecteur?.addEventListener('change', ()=>{
            const url = new URL(location.href);
            url.searchParams.set("moduleimpl_id", selecteur?.value);
            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 pour les boutons de pagination*/
        border: 1px solid #ccc;
        background-color: #f1f1f1;
        padding: 8px 16px;
        font-size: 16px;
        border-radius: 4px;        
        margin: 8px 1px;

    }
    .pagination li:hover >a, .pagination li.active>*{
        /*Style pour les boutons actifs*/
        background-color: var(--sco-color-ues);
        color: white !important;

    }

    .pagination li.disabled>*{
        /*Style pour les boutons désactivés*/
        opacity: 0.5;
        cursor: default;
        pointer-events: none;
        user-select: none;
    }
</style>