Using row.remove or rows.remove, how do you pass a row ID to ajax to delete the row from mysql

koniahin

Clicking the Delete button visually deletes the row but not from the database. It passes an Undefined ID to the $ajax postData.php script. html:

<button id="deleteRow"  class="pull-right">Delete selected row</button>

<tr id='57' rowid='57'> // $id or $rowid
  <td><input type='text' class='saveData' value='Donna Snider' name='name' id="57"></td>
  <td><input type='text' class='saveData' value='Customer Support' name='position' id="57"></td>
  <td>$112,000</td>
</tr>

JavaScript:

<script>
$(document).ready(function(){
  var table = $('#example').DataTable();
  $('#example tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('selected') ) {
      $(this).removeClass('selected');
    }
    else {
      table.$('tr.selected').removeClass('selected');
      $(this).addClass('selected');
    }
  });

  $('#deleteRow').click( function () {
    var DELETE = "yes";
    var name = $("#name").val();
    var ID=$(this).attr('id');

    table.row('.selected').remove().draw( false ); // visually delete row

    $("#Status").html( "" );
    var dataString = 'delete='+DELETE +'&id='+ID+'&name='+name;
    $.ajax({
      type: "POST",
      url: "postData.php",
      data: dataString,
      cache: false,
      success: function(html) { $("#Result").html( html ); }
    });
  });
});
</script>

Minus the ID problem the code above I think is good for a single row only. How would you make it work so that you can select/delete multiple rows as well? I can provide a demo link if that helps.

koniahin

Here is a link to the demo: http://www.dottedi.biz/demo/code/public/datatables1/index.php

rmeetin

Running into similar problem. Did you figure it out? I could not find an example in the forum posts.

allan

The id appears to come from the button (var ID=$(this).attr('id');). But since it is an id it would appear that it can only be deleteRow. I don't really understand that bit of code. I think you'd need to modify it to get the id of the selected row.

Allan

koniahin

Yes, it is passing the ID of deleteRow. What I don't know how to do is modify the jQuery code (I do mostly php/mysql) to get it to work when you click on the Delete button and pass an array of selected IDs to my ajax code. If I select a row(s) and click delete it passes:

delete    yes
id    deleteRow
name    undefined

deleteRow is the ID attached to the button, rather than the ID list.

I found some other non-datable demos which work to pass the array of IDs; unfortunately if I attempt to apply these 'hacks' they do work to delete the row but since they don't use the DT method, they more/less break the other informational functions on the page. They don't undate Show # Entries, Showing 1 to 4 of 4 entries, Search and Prev/Next. It gets out of sync.

allan

Can you give me a link to the page, or show me your full HTML and Javascript please?

I'm not quite clear on how you are selecting the rows for deletion? The HTML above suggests that you must have some way to select the rows and then click a single delete button that is outside of the table to delete them.

Allan

koniahin

The page with HTML and Javascript: http://www.dottedi.biz/demo/code/public/datatables1/index.php. If you view the page source you will see all the jQuery including the init code. It's commented so that you can find the section that applies to Delete. In a previous post you assisted with rowAdd; it's there and working just as you wrote it up.

At this point it's not selecting the rows; not being skilled in javascript/jquery I don't know how to make that work.

allan

It does appear to select the row if I click on the row.

To get the id attribute from an input element in the selected row use:

$( 'input', $('#example').DataTable().row({selected:true}).node() ).attr('id')

The documentation for this is available here.

Allan

koniahin

Thank you. I looked at the code and the documentation page, but don't get how/where to use this.

allan

Put it inside your button's event handler. The result of that expression will give you the id of the selected row.

Allan

koniahin

I tried adding the line everywhere I see as a choice within the deleteRow code. See: /tried/

$(document).ready(function(){
  var table = $('#example').DataTable(/*tried*/);
  $('#example tbody').on( 'click', 'tr', function (/*tried*/) {
   if ( $(this).hasClass('selected') /*tried*/) {
      $(this).removeClass('selected');
      /*tried*/
    }
    else {
      /*tried*/
      table.$('tr.selected').removeClass('selected');
      $(this).addClass('selected');
      /*tried*/
   }
    /*tried*/
  }) /*tried*/;
  /*tried*/

  $('#deleteRow').click( function (/*tried*/) {
    var DELETE = "yes";
    var name = $("#name").val();
    var ID=$(this).attr('id');
    /*tried*/
    table.row('.selected').remove().draw( false ); // visually delete row

    $("#Status").html( "" );
    var dataString = 'delete='+DELETE +'&id='+ID+'&name='+name;
    $.ajax({
      type: "POST",
      url: "postData.php",
      data: dataString,
      cache: false,
      success: function(html) { $("#Result").html( html ); }
    });
  });
  /*tried*/
});

allan

Line 22 is where I would suggest you do it. If that doesn't work, please add:

var id = $( 'input', $('#example').DataTable().row({selected:true}).node() ).attr('id');
console.log( id );

at that point in the code and update your page so I can see the results.

Allan

koniahin

We're getting closer. That does get a row ID, but it is always that of the first row:

Array
(
    [delete] => yes
    [id] => 57
)
delete from datatables where id = 57

If I repetitively click to delete the first row, the row deletes then the ID changes to the new first row. If I then click on rows other than the first it gets confused keeps trying to delete the first row. However, this is progress. Incidentally, to restore the table click on the disks icon.

allan

Okay - I just worked out that you aren't using Select for the row selection. I'd suggest you do so since you can then use the DataTables API like above.

If you don't want to use Select and continue using your own event handlers for the classes, use:

$( 'input', $('#example').DataTable().row('.selected').node() ).attr('id')

Allan

koniahin

The last line that you sent works marvelously. Part of the problem is a general assumption that I (the audience) have javascript/jquery skills and when you talk about the code it makes sense. Albeit I do php/mysql very well my javascript is limited. I do plug/play but don't have the concepts in hand. I am really excited to see this work. Last night I figured out how to get the responsive extension working. That's +2 in 2 days. Probably the next task will be to figure out how to delete multiple checked/selected rows. Much thanks.