First column is not displayed , and clicked column disappears

pheromix

I am developing a php web project with MetroUI CSS ( https://github.com/olton/Metro-UI-CSS ). I use jQuery dataTable ( jquery.dataTables.min.js ). Here is my code of the html table :

<table id="table_reserv_salle" data-searching="true">
    <thead>
        <tr>
            <th style="text-align: center;">Date d&eacute;but</th>
            <th style="text-align: center;">Heure d&eacute;but</th>
            <th style="text-align: center;">Date fin</th>
            <th style="text-align: center;">Heure fin</th>
            <th style="text-align: center;">Client</th>
            <th style="text-align: center;">Action</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script type="text/javascript" charset="utf-8">

    $(document).ready(function() {
        
        $('#table_reserv_salle').attr('style', 'width:100%');
        
        var tbl = $('#table_reserv_salle').DataTable({
                responsive: true,
                "oLanguage": {
                    "sUrl": "<?php  echo RP_LANG ?>fr_FR.txt",
                },
                "processing": true,
                "serverSide": true,
                ajax: "<?php  echo RP_SSP ?>server_processing_reservSalle.php?salle_code=<?php echo $salle_code; ?>",  
                "aoColumnDefs":
                    [{
                        "aTargets": [5],
                        "mData": 5,
                        "mRender": function (data, type, full) {
                            return '<div style="text-align:center;font-size:20px;"><a href="#"><span class="button default">Annuler</span></a></div>';
                        }
                    }],
                "aLengthMenu": [[10,25,50,100, -1], [10,25,50,100, "Tout"]]
            });
        
    });
    
</script>

The ajax source of the dataTable is :
```
<?php

include("../../app/config_const.php");

// DB table to use
$table = 'view_liste_reservation_salle';

// Table's primary key
$primaryKey = 'identifiant';

// Array of database columns which should be read and sent back to DataTables.
// The db parameter represents the column name in the database, while the dt
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
array( 'db' => 'date_debut', 'dt' => 0 ),
array( 'db' => 'heure_debut', 'dt' => 1 ),
array( 'db' => 'date_fin', 'dt' => 2 ),
array( 'db' => 'heure_fin', 'dt' => 3 ),
array( 'db' => 'noms_client', 'dt' => 4 ),
array( 'db' => 'identifiant', 'dt' => 5)
);

// SQL server connection information
$sql_details = array(
'user' => 'root',
'pass' => '',
'db' => BDD,
'host' => 'localhost'
);

require( 'ssp.class.php' );

echo json_encode(
SSP::complex( $_GET, $sql_details, $table, $primaryKey, $columns, ' salle_code='.$_GET["salle_code"] )
);

<?php > ``` The problem is that at runtime the first column is not displayed , also when I click a header to sort data by it then that column disapears and the first column which was disappeared is appeared ! So how to fix those problems ? ?>