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