Add copy to clipboard button to each row

Add copy to clipboard button to each row

csaba911csaba911 Posts: 17Questions: 4Answers: 0

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 :/

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736
    edited November 2021 Answer ✓

    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

  • csaba911csaba911 Posts: 17Questions: 4Answers: 0

    Perfect, Thanks

  • csaba911csaba911 Posts: 17Questions: 4Answers: 0

    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.

  • csaba911csaba911 Posts: 17Questions: 4Answers: 0
    edited November 2021

    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.

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736
    edited November 2021

    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

Sign In or Register to comment.