Problema al cargar table con ajax

[Pablo00000]

estuve investigando mas acerca del trabajo de ajax y su funcionamiento dinamico

el resultado q ahora me arroja es este:



y no entiendo por que?

codigo html:

Código HTML:

<table id="cargaTabla" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                   <tr>
                      <th>Nº</th>
                      <th hidden="true">Id</th>
                      <th>Carácter</th>
                      <th>Estado</th>
                   </tr>
                </thead>
                <tbody class="Datos">
                </tbody>
            </table> 

codigo ajax:

Código:

$(document).ready(function() {
    cargarTabla();
});

function cargarTabla(){
    $.ajax({
        url: '../controller/tipo_rif.php',
        dataType: 'json',
        type: 'POST',
        data: {
            'accion': 'cargarTabla' 
        },
        success: function (data) {
            $.each(data, function(index){
                var etiqueta;
                if($(data[index].status).text('activo')){
                    etiqueta = "<input type='checkbox' data-toggle='toggle' onchange='CambiarStatus("+data[index].id+")' data-on='Activado' data-off='Desactivado' checked><label hidden='true'>a</label>";
                }else if($(data[index].status).text('inactivo')){
                    etiqueta = "<input type='checkbox' data-toggle='toggle' onchange='CambiarStatus("+data[index].id+")' data-on='Activado' data-off='Desactivado'><label hidden='true'>b</label>";
                }
                $(".Datos").append("\
                    <tr>\n\
                        <td>"+data[index].cont+"</td>\n\
                        <td hidden='true'>"+data[index].id+"</td>\n\
                        <td>"+data[index].caracter+"</td>\n\
                        <td>"+etiqueta+"</td>\n\
                    </tr>\n\
                ");
            });
        }
    });
}

codigo php:

Código PHP:

  <?php 
include("../model/conexion.php"); 
 
if($_POST["accion"]=="cargarTabla"){ 
    cargarTabla(); 
} 
 
function cargarTabla(){ 
    $pdo = conexion::connect();  
    $sql = "SELECT  
            id,  
            caracter,  
            CASE  
            WHEN status='t' THEN 'activo' 
            WHEN status='f' THEN 'inactivo' 
            ELSE 'error' 
            END AS status 
 
            FROM tipos_rif ORDER BY caracter"; 
    $cont=0; 
    foreach ($pdo->query($sql) as $row) { 
        $cont++; 
        $datos[] = array('cont'=>$cont,'id'=>$row['id'],'caracter'=>$row['caracter'],'status'=>$row['status']); 
    } 
    conexion::disconnect(); 
    header('Content-type: application/json'); 
    echo json_encode($datos); 
}   

disculpen mi ignorancia pero ya no se q hacer! y me urge