How to add Edit and Delete buttons to row

Murray

I have Edit and Delete buttons per row and Edit button only works if on expanded row. Clicking anywhere on the row activates the edit window instead of just on the button. I suspect my method of adding these buttons is incorrect. Please let me know how I should go about this.

<?php
  global $wpdb;
  $result = $wpdb->get_results ( "SELECT * FROM lca_library" );
  $dataset = "[";
  foreach ( $result as $print )   {
      $dataset .= "[";
      $dataset .= '"'.$print->id.'",';
      $dataset .= '"'.$print->category.'",';
      $dataset .= '"'.$print->subject.'",';
      $dataset .= '"'.$print->link.'",';
      $dataset .= '"'.$print->document.'",';
      $dataset .= '"'.$print->content.'",';
      $dataset .= "],";
  }
  $dataset = rtrim($dataset, ',');
  $dataset .= "]";

<?php
>
?>


<script>
  jQuery(document).ready(function() {
      jQuery('#library').DataTable( {
          data: <?php echo $dataset; ?>,
          responsive: true,
          autoWidth: true,
          searching: true,
          columns: [
              { title: "Entry" },
              { title: "Category" },
              { title: "Subject" },
              { title: "Link" },
              { title: "Document" },
              { title: "Content" },
              { title: "", "defaultContent": "<button onclick='edititem();'>Edit</button>" },
              { title: "", "defaultContent": "<button onclick='deleteitem();'>Delete</button>" }
          ],
          "fnRowCallback": function(nRow, aData, iDisplayIndex) {
          nRow.setAttribute('id',aData[0]);
          },
          // dom: 'id',
          dom: 'Bfrtip',
          buttons: [
              'pdf',
              'excel',
              'print',
              'csv'
          ]
      } );
  } );
  
  function edititem() {
    jQuery('#library tr').click(function(e) {
        e.stopPropagation();
        var $this = jQuery(this);
        var trid = $this.closest('tr').attr('id');
        var x = 0, y = 0; // default values 
    x = window.screenX +5;
    y = window.screenY +275;
    window.open('../DataTables/editlibrary.php?id='+trid,'editlibrary','toolbar=0,scrollbars=1,height=600,width=800,resizable=1,left='+x+',screenX='+x+',top='+y+',screenY='+y);
    });
}

  function deleteitem() {
    alert('delete');
  }
  
</script>
  
<div style="margin-left: 10px; margin-right: 20px;">
<table id="library"></table>
</div>

kthorngren

See if the answers in this thread help.

Kevin

colin

Another example here.

Colin

Murray

Many thanks for answers. kthorngren's places a button at the end but it it only visible when the + is clicked on the row and for some reason does not, when there, pick up the id of the row.

Colin's answer requires the Editor plugin which is not currently an option although may become the way to go.