How to copy selected cell from Datatable to clipboard?

Nishtha

I want to copy selected cell to clipboard, I am able to select cell but not to copy them?
'''$(document).ready(function(){

               $('#example').DataTable({

                lengthChange: false,
                 extend: 'collection',
                 dom: 'Bfrtip',
                buttons: ['copy', 'csv', 'excel', 'pdf','selectNone','selectCells',{extend:'print',exportOptions: {modifier: {selected: true}}}],

                select: true,

            });

'''

kthorngren

I want to copy selected cell to clipboard

Are you wanting to copy using the copy button or some other mechanism. I don't think there is a way to have the copy button copy only one selected cell. Its basically wanting to copy row by row. If you use modifier: {selected: true} for example it is only looking for a selected row not cell.

However there may be a way to do what you want. Do you want to copy the selected cell by clicking a Datatables button or using CTRL-C or when the cell is selected? Please describe how you want the process to work.

Kevin

Nishtha

@kthorngren I do not want to copy using control+C. I want to copy a selected cells by clicking a Datatable button, similar functionality like the copy is doing with rows, but instead of rows copy the selected cells to clipboard

colin

That's what Select extension and Buttons do - see here. You can set select.items to cell to allow individual cells to be selected.

Colin

kthorngren

@colin I might be missing something but I don't think there is a way to copy a single cell using the standard Copy button.

Checkout this example:
http://live.datatables.net/zusoloya/3/edit

Select a cell and click the Copy button. It copies 0 rows and if you paste there will be just the header.

@Nishtha To copy just a single cell you will need to create a Custom Button like this example and place code in the button to copy the selected cell. You can look at this w3schools tutorial for information of how to do this. I used a solution provided in this SO thread. Try the Copy Select Cell in the above example.

Kevin

colin

@kthorngren you're right, I've learned something else now - two things in a day. I'd always assumed the copy would copy whatever was selected. I'm tempted to say it's a bug that it doesn't.

allan

Yup - the copy button copies whole rows and works only off the selected rows (if any are - the bug is that we should document that more clearly).

However @Nishtha - you are using select: true are you then using the select.items() method to change it to cell selection rather than row selection? That isn't clear to me from your question.

Allan

Nishtha

@allan @kthorngren I am suing below code, with this code I am able to select multiple cells, and copy them to clipboard-
'''var table=$('#example').DataTable({
responsive: true,
dom: 'Bftrip',
select: {
items: 'cell'
},
buttons: ['copy','csv','excel','selectNone',
{ exportOptions: {
modifier: {selected: true}
}
},
{
text: 'Copy Select Cells',
action: function ( e, dt, node, config ) {

                var data = table.cells( { selected: true } ).data();

                console.log(data.length);


                var copyString = '';

                for (var i = 0; i < data.length; i++) {
                    copyString = copyString + data[i] + "\t\t";
                    console.log(copyString);
                                            }

                copyString = copyString.trim(); // to remove trailing tab character

                if (copyString !== undefined) {
                    alert( 'Copied'+' '+ data.length + ' '+ 'RUCS variable name');
                    var dummy = document.createElement("input");
                    document.body.appendChild(dummy);

                    dummy.setAttribute("id", "dummy_id");
                    document.getElementById("dummy_id").value=copyString;
                    dummy.select();
                    document.execCommand("copy");
                    document.body.removeChild(dummy);

                                }
                            }
                        }

                    ]

'''
There is only one issue with this, table is showing empty button for copy, as I am extending copy to Copy Select Cells' button, check the attached image.![]
Do you have any idea how can I remove that or hide that?

kthorngren

It looks like you have this which might be causing a blank button:

                { exportOptions: {
                    modifier: {selected: true}
                                }
                                    },

Kevin

Nishtha

@kthorngren that worked. Thanks much for all the help!