<head>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
</head>


<!-- <div id="example_wrapper" class="dataTables_wrapper"> -->
<table id="example" class="display dataTable" style="width:100%" aria-describedby="example_info">
    <thead>
        <tr>
            <th class="sorting sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 128.867px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">Fecha</th>
            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 217.267px;" aria-label="Position: activate to sort column ascending">Horas</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td class="sorting_1">=01/10/2022</td>
            <td>33</td>
        </tr>
        <tr class="even">
            <td class="sorting_1">01/10/2022</td>
            <td>47</td>
        </tr>
        <tr class="odd">
            <td class="sorting_1">01/10/2022</td>
            <td>66</td>
        </tr>
        <tr class="even">
            <td class="sorting_1">01/10/2022</td>
            <td>41</td>
        </tr>
        <tr class="odd">
            <td class="sorting_1">01/10/2022</td>
            <td>28</td>
        </tr>
        <tr class="even">
            <td class="sorting_1">01/10/2022</td>
            <td>61</td>
        </tr>
        <tr class="odd">
            <td class="sorting_1">01/10/2022</td>
            <td>38</td>
        </tr>
        <tr class="even">
            <td class="sorting_1">02/10/2022</td>
            <td>21</td>
        </tr>
        <tr class="odd">
            <td class="sorting_1">01/10/2022</td>
            <td>46</td>
        </tr>
        <tr class="even">
            <td class="sorting_1">01/10/2022</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th rowspan="1" colspan="1">Name</th>
            <th rowspan="1" colspan="1">Position</th>
            <th rowspan="1" colspan="1">Office</th>
            <th rowspan="1" colspan="1">Age</th>
            <th rowspan="1" colspan="1">Start date</th>
            <th rowspan="1" colspan="1">Salary</th>
        </tr>
    </tfoot>
</table>
<!-- </div> -->

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let table = new DataTable('#example');
    });
</script>