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

<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">
    {{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>

    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>