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

<div>
    <div class="sco_box_title">{{ titre }}</div>
    <div id="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>
        <input type="number" name="nb_ligne_page" id="nb_ligne_page"
                size="4" step="25" min="10" value="{{options.nb_ligne_page}}"
                onchange="updateTableau()"
                >

        <label for="n_page">Page n°</label>
        <select name="n_page" id="n_page">
            {% for n in range(1,total_pages+1) %}
                <option value="{{n}}" {{'selected' if n == options.page else ''}}>{{n}}</option>
            {% endfor %}
        </select>
        <br>


    </div>
</div>

{{table.html() | safe}}

<script>

    function updateTableau() {
        const url = new URL(location.href);
        const form = document.getElementById("options-tableau");
        const formValues = form.querySelectorAll("*[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;
        }
    }

</script>

<style>
    .small-font {
        font-size: 9pt;
    }
</style>