1

RESUMEN

Me gustaría saber como puedo jugar con la estructura de una datatable y poner dentro un botón.

IMAGEN PARA QUE ME ENTIENDAN

introducir la descripción de la imagen aquí

¿Pueden ver ese botón que dice PDF? Me gustaría poder jugar con su posición y ponerlo dentro del datatable.

Aquí les muestro como tengo el html.

HTML

<button>PDF</button>

<div class="BordeTabla">
    <table id="TablaHemofilia" class="table table-striped" style="width:100%">
       
         <thead class="sticky-md-top ">
            <tr class="bg-white">
                <th>Nombres</th>
                <th>Apellidos</th>
                <th>Medio Comunicacion</th>
                <th>Tipo Organizacion</th>
                <th>Cargo</th>
                <th>Tipo Informacion</th>
                <th>Interes</th>
                <th>Formato Preferido</th>
            </tr>
        </thead>
        <tbody >
            <?php 

                $query ="SELECT * FROM usuario";

                $res = mysqli_query($conexion,$query);
                while($row = mysqli_fetch_array($res)){?>
                 <tr>   
                    <td><?php echo "nombres"; ?></td>
                    <td><?php echo "apellidos"; ?></td>
                    <td><?php echo "medioComunicacion"; ?></td>
                    <td><?php echo "tipoOrganizacion"; ?></td>
                    <td><?php echo "cargo"; ?></td>
                    <td><?php echo "tipoInfo"; ?></td>
                    <td><?php echo "interes"; ?></td>
                    <td><?php echo "formPreferido"; ?></td>
                </tr>

                 <?php }?>   
        </tbody>    
    </table>
</div>    

Aclaraciones

Estoy usando CDN de Dadatables, php, javascript y SQLserver

1
  • Si lo que quieres es "mover" el botón de pdf, puedes hacerlo vía jquery y copiarlo dentro del contenedor que quieras. Commented el 1 mar. 2022 a las 11:35

2 respuestas 2

2

Supongo que lo que necesita es que hayan botones por filas, Lo que debe hacer es lo siguiente:

<table>
  <thead>
    <tr>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><button>Mi boton</button></td>
    </tr>
  </tobody>
</table>

Ten en cuenta que la cantidad de th deben coincidir con la cantidad de td dentro de su tbody.

3
  • lo que necesito es poner el boton pdf, entre el mostrar y el buscar, en la mitad
    – user269871
    Commented el 1 mar. 2022 a las 1:08
  • @Sleon esta usando un plugin javascript denominado datatables, no tablas de datos en html puro. Tu respuesta no es adecuada para este caso, pero gracias por el aporte.
    – masterguru
    Commented el 1 mar. 2022 a las 6:08
  • Mis disculpas sino era la respuesta adecuada, Antes usé un plugin de datatable donde este permite modificar al dom y añadir botones de exportación como lo es PDF, está el ejemplo de como usarlo y las url requeridas para los recursos solicitados. datatables.net/extensions/buttons/examples/html5/simple.html
    – Sleon
    Commented el 2 mar. 2022 a las 2:05
0

no eres muy especifico con respecto a lo que quieres hacer con el botón, (1)si imprimir la información de la tabla completa, (2)o que imprima la información de la fila seleccionada solamente... siguiendo la lógica de poner botones en una tabla me inclino por la segunda opción. Lo que yo hago para manejar databales y renderizar botones en ella es usar javascript y jquery de la siguiente forma.

$("#MyTable").addClass("nowrap").DataTable({
    "pageLength": 5,
    "order": [[0, "desc"]],
    data: MiArregloDeDatos,
    columns: [
        { title: "cell1" },
        { title: "cell2" },
        { title: "cell3" },
        { title: "cell4" },
        { title: "cell5" },
    ],
    columnDefs: [
        { targets: 3, visible: false },
        {
            targets: -1,
            orderable: false,
            data: null,
            render: function (data, type, row, meta) {
                let fila = meta.row;
                let botones = `
                        <button class='btn btn-primary btn-circle'
                            onclick='toggle("#div_misAcciones"); return false;'>
                            <i class="fa fa-list" style="font-size:15px;"></i>
                        </button>`;
                return botones;
            }
        }
    ],
    "bDestroy": true
});

Lo que hago es inicializar una datatable sobre una tabla creada en html, y le paso un arreglo con datos para que se llene

<table class="table table-bordered table-hover" style="width: 100%; margin-top: 0px !important; table-layout:fixed;" id="MyTable">
                                    
                                </table>

Finalmente quedaria mi tabla de la siguiente forma:

Datatable con render

Puedes revisar la documentación de datatable con respecto a renderizar html dentro de un datatable en el siguiente enlace:Documentacion Render datatable

Tu Respuesta

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