Add copy to clipboard button to each row

csaba911

Copy to clipboard works great but I would like to have them in each row instead of selecting a row and tap the copy button.
Managed to add a button to each row and style it with a class I wanted but now how to trigger the copy function and alert same notification as the one on the top of the page

kthorngren

Interesting question. See this example:
http://live.datatables.net/xezupobe/1/edit

It uses the exportOptions of the copyHtml5 button to select the rows to export. The buttons.exportData() docs document all the options available. It uses the row-selector as a string (classname).

The button click event adds the configured classname then uses button().trigger()to trigger the appropriate button. It then removes the classname.

Optionally it uses initComplete to get the button().node() in order to hide the button.

Kevin

csaba911

Perfect, Thanks

csaba911

Grrr, now I would like to copy the fist cell data only, no header, footer or table name, just the first cell of the row where the button is being pressed.

csaba911

well I'm butchered this together to make it work but I'm sure there is way to do it properly in data tables.

$('#inventory_list').on('click', 'tbody input[name="copy"]', function(){
      var td = $(this).closest('tr').children('td:first');
      const el = document.createElement('textarea');      
      el.value = td[0].innerText;
      console.log(el);
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      const md = document.createElement('div');
      $(md).append('<h2>Copy to clipboard</h2>');
      $(md).append('<div>Serial ' + td[0].innerText + ' copied to clipboard</div>')
      $(md).addClass('dt-button-info');
      document.body.appendChild(md);
      setTimeout(function(){document.body.removeChild(md)}, 2000);
  })

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

copy the fist cell data only, no header, footer or table name

There are Buttons extension options to make these changes. The column selector example shows how to specify the columns to export. You can use any column-selector like just the column number. See this example for controlling the title (table name) and this example for enabling the footer, which is disabled by default. You can use the same technique to disable the header with header: false.

Or you can create your own custom function like above.

Kevin