0

Tengo una mini pagina que me muestra los datos que están almacenados en un array tipo objeto en JavaScript quiero crear un botón al final de mi HTML dinámicamente con datatable pero en lugar del botón me sale lo siguiente:

[object HTMLButtonElement]

Este es mi código HTML:

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery.dataTables.min.css">
    <title>chiquiProyecto</title>

</head>

<body>

    <div class="jumbotron text-center">
        <h1>Registro procedimientos odontológicos</h1>
        <p>Este documento va anexado a la historia clinica odontologica del paciente</p>
    </div>

    <div class="container border-0 text-center">
        <table class="table table-hover table-striped table-bordered" id="tablaPacientes">
            <thead class="thead-dark">
                <tr>
                    <th>Nombre paciente</th>                    
                    <th>Tipo documento</th>
                    <th>Numero documento</th>
                    <th>Fecha consulta</th>
                    <th>Detalle</th>
                </tr>
            </thead>
            <tbody id="cuerpoTabla">

            </tbody>
        </table>
    </div>
<br>
<br>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="JQuery/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="misJS/chiquiproyecto2.js"> </script>  
    <script src="js/jquery.dataTables.min.js"></script>
</body>
</html>

Este es mi código JavaScript el cual crea el botón y lo añade a la ultima posición de cada fila del array:

var array =
    [["oscar Benavidez", "c.c", 765454676, "12-03-2018"],
    ["fernando gonzales", "c.c", 897858467, "02-07-2018"],
    ["santiago mendez", "c.c", 125457878, "15-01-2019"],
    ["luisa manrrique", "c.c", 78758744, "28-02-2019"],
    ["pedro higuera", "c.c", 988957874, "15-04-2020"],
    ["luis amador", "c.c", 34478304, "16-07-2918"]
    ];
const tBody = document.getElementById('cuerpoTabla');
i = -1;
for (const fila of array) {
    i = i + 1
    var crearFila = document.createElement('tr')
    crearFila.setAttribute('id','fila'+i)
    tBody.appendChild(crearFila)
    j=-1;
    var ponerDato = document.getElementById('fila'+i)
    var boton = document.createElement("button");
    boton.innerHTML = 'ver';
    fila.push(boton);
    // ponerDato.appendChild(boton);
    for (const iterator of fila) {
        j=j+1;
        var crearColumna = document.createElement('td');
        crearColumna.setAttribute('id','columna'+j);
        crearColumna.textContent = iterator;
        ponerDato.appendChild(crearColumna);
    }
}

$(document).ready(function () {
    $('#tablaPacientes').DataTable();
});

Agradezco la ayuda al que se tome la molestia de mirar mi código y decirme como convierto ese objeto en el botón que necesito, muchas gracias.

1

1 respuesta 1

0

Como lo dijo Triby dentro de su documentación dice como hacerlo, te dejo el ejemplo en tu código.

Igual creo haber visto tu error, y acomodado tu código, revísalo, igual lo que hago es después de poner en la ultima fila la columna, agrego una con el btn, de igual manera creo que es mas simple hacerlo con la documentación.

var array = [
  ["oscar Benavidez", "c.c", 765454676, "12-03-2018"],
  ["fernando gonzales", "c.c", 897858467, "02-07-2018"],
  ["santiago mendez", "c.c", 125457878, "15-01-2019"],
  ["luisa manrrique", "c.c", 78758744, "28-02-2019"],
  ["pedro higuera", "c.c", 988957874, "15-04-2020"],
  ["luis amador", "c.c", 34478304, "16-07-2918"]
];
const tBody = document.getElementById('cuerpoTabla');
i = -1;
for (const fila of array) {
  i = i + 1
  var crearFila = document.createElement('tr')
  crearFila.setAttribute('id', 'fila' + i)
  tBody.appendChild(crearFila)
  j = -1;
  var ponerDato = document.getElementById('fila' + i)
  
  for (const iterator of fila) {
    j = j + 1;
    var crearColumna = document.createElement('td');
    crearColumna.setAttribute('id', 'columna' + j);
    crearColumna.textContent = iterator;
    ponerDato.appendChild(crearColumna);
  }
    var crearColumna = document.createElement('td');
    crearColumna.setAttribute('id', 'columna' + j+1);
    var boton = document.createElement('button');
    boton.appendChild(document.createTextNode("Ver!"+fila[0]));
    crearColumna.appendChild(boton);
    ponerDato.appendChild(crearColumna);
  
}
$(document).ready(function() {
  var table = $('#tablaPacientes').DataTable();
  });
  
  
/*
$(document).ready(function() {
  var table = $('#tablaPacientes').DataTable({
    "columnDefs": [{
      "targets": -1,
      "data": null,
      "defaultContent": "<button class='btn btn-dark '>Documento</button>"
    }]
  });

  $('#tablaPacientes tbody').on('click', 'button', function() {
    var data = table.row($(this).parents('tr')).data();
    alert(data[0] + " Tiene documento Nro: " + data[2]);
  });


});
*/
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" />

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>chiquiProyecto</title>

</head>

<body>

  <div class="jumbotron text-center">
    <h1>Registro procedimientos odontológicos</h1>
    <p>Este documento va anexado a la historia clinica odontologica del paciente</p>
  </div>

  <div class="container border-0 text-center">
    <table class="table table-hover table-striped table-bordered" id="tablaPacientes">
      <thead class="thead-dark">
        <tr>
          <th>Nombre paciente</th>
          <th>Tipo documento</th>
          <th>Numero documento</th>
          <th>Fecha consulta</th>
          <th>Detalle</th>
        </tr>
      </thead>
      <tbody id="cuerpoTabla">

      </tbody>
    </table>
  </div>
  <br>
  <br>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.