0

estoy haciendo un boton de copiar el cual quiero que me copie el registro completo de la columna (la cual oculto), pero obviamente al copiar quiero que se copie el registro completo :

 "columns" : [

                { "data" : "fecha", title : "Fecha ", className : "text-left" , visible : true },
                { "data" : "descripcion", title : "Descripción ", className : "text-left" , visible : true},
                { "data" : "token_client", title : "Token Client", className : "text-left" , visible : true },
                { "data" : "secret", title : "Secret", className : "text-left" , visible : true,
                    // Si tiene mas de 20 caracteres devuelve los 10 primeros y oculta
                    render : function (data,type,row) {
                        let valueSecret = row.secret;
                        let button = '<button class="btn btn-xs btn-primary"  title="Copiar" style="margin-left: 10px" >' +
                            '<i class="fa fa-copy"></i></button>' ;

                        if (row.secret.length > 20){
                            valueSecret = row.secret.substr(0, 10) + '...'; }

                        let conjunto = valueSecret + button ;
                        return conjunto; }

                },

Esta es la imagen para que visualicen lo que me refiero

7
  • Por lo que me parece entender, lo que pretendes es copiar toda la fila donde sea pulsado ese botón de esa columna. ¿Pero en que formato? ¿para pegar donde?
    – masterguru
    Commented el 2 sept. 2022 a las 20:52
  • claro toda la fila pero tambien lo oculto, osea el valor que trae de la base de datos completo, no se si me explico... simplemente que al presionar ese boton me copie el campo de la tabla, en el portapapeles para despues pegarlo donde yo quiera. Estoy utilizando JS, php, datatables ajax Commented el 2 sept. 2022 a las 22:06
  • Si solo es un valor que tienes en un elemento con un id único, por ejemplo valor_a_copiar entiendo que puedes usar algo asi como document.getElementById('valor_a_copiar').select();document.execCommand('copy');... ¿es algo así lo que quieres?
    – masterguru
    Commented el 2 sept. 2022 a las 22:11
  • el tema que al ser un datatable quiero que traiga el texto de cada columna en la posicion que este el boton me explico? Commented el 5 sept. 2022 a las 4:31
  • Pues agrega un input escondido con un id o clase único en el let button= con todo el texto de row.secret, y copias ese, pues si te fijas después lo estás limitando a 10 caracteres y si quisieras la copia de eso seria parcial.
    – masterguru
    Commented el 5 sept. 2022 a las 5:34

1 respuesta 1

0

Primero a tu DataTable en la columna que deseas copiar el campo agregale una referencia para saber que puedes copiar cualquier campo de esa columna, este caso la referencia será una clase, "portapapeles". La aplicas en la data de las columnas (column):

columns:[
    {data: 'datoEnColumna',
        className: 'portapapeles',
        render: (data, type, row) => {
            return `<i class='bx bx-copy-alt'></i> ${row['datoEnColumna']}`;
        }
    }
]

Bien ahora con el método on() de JQuery (en mi caso) dentro del mismo, creas el código para copiar:

$(tuTabla).on('click', '.portapapeles, function (e) {
    e.preventDefault();
    let textoPortapapeles = $(this).text().trim();
    // En el if puedes aplicar isBlank() que te retorne un boolean para validar que no esté vacío lo que se copiara
    if (textoPortapapeles != '' || textoPortapapeles.length >= 1) {
        // Crea un campo de texto "oculto"
        let inputPortapapeles = document.createElement('input');
        // Asigna el contenido del elemento especificado al valor del campo
        inputPortapapeles.setAttribute('value', textoPortapapeles);
        // Añade el campo a la página
        document.body.appendChild(inputPortapapeles);
        // Selecciona el contenido del campo
        inputPortapapeles.select();
        // Copia el texto seleccionado
        document.execCommand('copy');
        // Elimina el campo de la pagina
        document.body.removeChild(inputPortapapeles);
        // Alert
        alert(`Texto "${textoPortapapeles}" copiado en portapapeles`);
    }
});

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.