codice:
<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard Dipendenti</title>
    <link rel="icon" href="../img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/stile.css">
</head>

<body>
    <h1>Elenco Dipendenti</h1>

    <!-- Contenitore principale per la ricerca, tabella e paginazione -->
    <div id="mainContainer">

        <div id="mainTableContainer">

            <div id="dipendentiContainer">

                <div id="search-box">
                    <input type="text" id="searchInput" placeholder="Cerca dipendente...">
                    <button id="resetButton" class="hide">&times;</button> <!-- Pulsante per cancellare la ricerca -->
                </div> <!-- Div per la casella di ricerca -->


                <table id="tableDipendenti" class="display" style="width:100%">
                    <thead>
                        <tr class="header-row">
                            <th class="first-table"></th>
                            <th class="first-table">MATRICOLA:</th>
                            <th class="first-table">COGNOME:</th>
                            <th class="first-table">NOME:</th>
                            <th class="first-table">DATA DI NASCITA:</th>
                            <th class="first-table">CODICE SISPI:</th>
                            <th class="first-table">DATA DI ASSUNZIONE:</th>
                            <th class="first-table">INTESTAZIONE BADGE:</th>
                            <th class="first-table">FOTO:</th>
                            <th class="first-table">STATO:</th>
                            <th class="hidden-id">TOTALE BADGE:</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Dati tabella -->
                    </tbody>
                </table>
                <div id="pagination" class="pagination"></div>
            </div>

            <div id="badgeTableContainer" style="display: none;">
                <table id="badgeTable">
                    <thead>
                        <!-- Intestazioni tabella badge -->
                    </thead>
                    <tbody>
                        <!-- Dati tabella badge -->
                    </tbody>

                    <tfoot>
                        <tr>
                            <td colspan="9">
                                <div id="badgePagination" class="pagination">
                                    <!-- Qui verranno aggiunti i bottoni di paginazione via JavaScript -->
                                </div>
                            </td>
                        </tr>
                    </tfoot>

                </table>


            </div>
        </div>

    </div>

    <scriptsrc="../js/popolatab.js"></script>
</body>

</html>