
```javascript
const API_URL =
    "../../../../model/api/etat_document_dossier_administratif.php";

let currentPage = 1;
let perPage = 10;
let totalPages = 1;

let currentId = null;
let editMode = false;

document.addEventListener("DOMContentLoaded", () => {

    loadStats();

    loadData();

    document
        .getElementById("searchForm")
        .addEventListener("submit", function (e) {

            e.preventDefault();

            currentPage = 1;

            loadData();

        });

});

function loadData() {

    loadTypes();

}

function resetSearch() {

    document
        .getElementById("searchForm")
        .reset();

    currentPage = 1;

    loadData();

}

function loadStats() {

    fetch(API_URL + "?action=stats")

        .then(r => r.json())

        .then(res => {

            if (res.success) {

                document
                    .getElementById("statTotal")
                    .innerHTML = res.data.total;

            }

        });

}

function loadTypes() {

    const id =
        document.getElementById("searchId").value;

    const libelle =
        document.getElementById("searchLibelle").value;

    const code =
        document.getElementById("searchCode").value;

    const description =
        document.getElementById("searchDescription").value;

    fetch(
        API_URL +
        "?action=search" +
        "&id=" + encodeURIComponent(id) +
        "&libelle=" + encodeURIComponent(libelle) +
        "&code=" + encodeURIComponent(code) +
        "&description=" + encodeURIComponent(description) +
        "&page=" + currentPage +
        "&per_page=" + perPage
    )

        .then(r => r.json())

        .then(res => {

            if (res.success) {

                renderTable(res.data.data);

                renderPagination(res.data);

            }
            else {

                showToast(res.message, "error");

            }

        });

}
```
```javascript
function renderTable(data) {

    let html = "";

    if (data.length === 0) {

        html = `
            <tr>
                <td colspan="5" style="text-align:center;">
                    Aucun résultat
                </td>
            </tr>
        `;

    } else {

        data.forEach(t => {

            html += `

            <tr>

                <td>${t.id}</td>

                <td>${escapeHtml(t.libelle)}</td>

                <td>${escapeHtml(t.code)}</td>

                <td>${escapeHtml(t.description ?? "-")}</td>

                <td>

                    <button
                        class="btn btn-info btn-sm"
                        onclick="viewDetail(${t.id})">

                        <i class="fas fa-eye"></i>

                    </button>

                    <button
                        class="btn btn-warning btn-sm"
                        onclick="openEditModal(${t.id})">

                        <i class="fas fa-edit"></i>

                    </button>

                    <button
                        class="btn btn-danger btn-sm"
                        onclick="deleteEtatDocument(${t.id})">

                        <i class="fas fa-trash"></i>

                    </button>

                </td>

            </tr>

            `;

        });

    }

    document.getElementById("tableBody").innerHTML = html;

}

function renderPagination(data) {

    totalPages = data.totalPages;

    document.getElementById("paginationInfo").innerHTML =
        "Affichage de " +
        (((data.page - 1) * perPage) + 1) +
        " à " +
        Math.min(data.page * perPage, data.total) +
        " sur " +
        data.total;

    let html = "";

    for (let i = 1; i <= totalPages; i++) {

        html += `

        <button
            class="${i == data.page ? "active" : ""}"
            onclick="goToPage(${i})">

            ${i}

        </button>

        `;

    }

    document.getElementById("pageNumbers").innerHTML = html;

    document.getElementById("prevBtn").disabled =
        data.page == 1;

    document.getElementById("nextBtn").disabled =
        data.page == totalPages;

}

function changePage(type) {

    if (type == "prev" && currentPage > 1) {

        currentPage--;

    }

    if (type == "next" && currentPage < totalPages) {

        currentPage++;

    }

    loadData();

}

function goToPage(page) {

    currentPage = page;

    loadData();

}
```
```javascript
function renderTable(data) {

    let html = "";

    if (data.length === 0) {

        html = `
            <tr>
                <td colspan="5" style="text-align:center;">
                    Aucun résultat
                </td>
            </tr>
        `;

    } else {

        data.forEach(t => {

            html += `

            <tr>

                <td>${t.id}</td>

                <td>${escapeHtml(t.libelle)}</td>

                <td>${escapeHtml(t.code)}</td>

                <td>${escapeHtml(t.description ?? "-")}</td>

                <td>

                    <button
                        class="btn btn-info btn-sm"
                        onclick="viewDetail(${t.id})">

                        <i class="fas fa-eye"></i>

                    </button>

                    <button
                        class="btn btn-warning btn-sm"
                        onclick="openEditModal(${t.id})">

                        <i class="fas fa-edit"></i>

                    </button>

                    <button
                        class="btn btn-danger btn-sm"
                        onclick="deleteEtatDocument(${t.id})">

                        <i class="fas fa-trash"></i>

                    </button>

                </td>

            </tr>

            `;

        });

    }

    document.getElementById("tableBody").innerHTML = html;

}

function renderPagination(data) {

    totalPages = data.totalPages;

    document.getElementById("paginationInfo").innerHTML =
        "Affichage de " +
        (((data.page - 1) * perPage) + 1) +
        " à " +
        Math.min(data.page * perPage, data.total) +
        " sur " +
        data.total;

    let html = "";

    for (let i = 1; i <= totalPages; i++) {

        html += `

        <button
            class="${i == data.page ? "active" : ""}"
            onclick="goToPage(${i})">

            ${i}

        </button>

        `;

    }

    document.getElementById("pageNumbers").innerHTML = html;

    document.getElementById("prevBtn").disabled =
        data.page == 1;

    document.getElementById("nextBtn").disabled =
        data.page == totalPages;

}

function changePage(type) {

    if (type == "prev" && currentPage > 1) {

        currentPage--;

    }

    if (type == "next" && currentPage < totalPages) {

        currentPage++;

    }

    loadData();

}

function goToPage(page) {

    currentPage = page;

    loadData();

}
```

