why is css not reloading

bh79

<script>
$(document).ready(
        function() {
$('#depid').change(
                    function() {
 $.getJSON('loadTable',{
                            depid : $(this).val()
                        }, function(data) {
             
                            var html = '<thead><tr><th>Name</th><th>Surname</th><th>Gender</th><th>Mobile phone</th><th>E-mail</th></tr></thead><tbody>';
                            var len = data.length;
              
                            for ( var i = 0; i < len; i++) {

                                html += '<tr>' +
                                '<td>' + data[i].name + '</td>' +
                                '<td>' + data[i].surname + '</td>' +
                                '<td>' + data[i].gender + '</td>' +
                                '<td>' + data[i].mobilephone+ '</td>' +
                                '<td>' + data[i].email + '</td>' +
                                        '</tr>'
                                
                            }
                            html += '</tbody>';
                            $('#personList).html(html);
                            $('#personList').DataTable();
                        }).error(function(jqXHR, textStatus, errorThrown){ 
                            alert(errorThrown);
                        });
                    });
        });

Script is working without problem with css for the first time but second time when the change event is triggered it's not loading css so there is no sorting function in the datatable
Can anybody help me please ?
Thanks