How to delete current row with jquery datatable plugin

Question

I have a column with buttons in a table I'm using jQuery datatable plugin. The buttons say "Remove" and the idea is that when you click on that button it deletes the current row in the table.

When I call fnDeleteRow it seems to work the first time but no any further time for that row so it looks like its not really deleting the row properly.

Aubigny

Need more info. Do you use ajax to populate your datatable or are you converting a static html table? Also: why is the data no longer accurate? doesn't datatable move the tr (and corresponding id tags) on sort? – Impassion

Answer 1

Try this:

var row = $(this).closest("tr").get(0);
oTable.fnDeleteRow(oTable.fnGetPosition(row));

If it doesn't work, check the following example

Rexanna

+1 but I think closest would be a more appropriate selector than parents – Secretive

i did switch it closest but after that it worked perfectly .. thanks – Aubigny

Answer 2

Let's say you attached a function to be called when the user clicks on the button. The function would be something like this

function DeleteRow(event)
{
  //get the row of the cell that is clicked
  var $row = $(this).parents("tr").eq(0)
  //if you need the id you can get it as
  var rowid = $row.attr("id");
  //now you can call delete function on this row
  $row.delete(); 
}

Kwarteng

Answer 3

How about this:

    // Delete Row
    $('.glyphicon-minus').on("click", function() {
        configTable.row($(this).closest("tr").get(0)).remove().draw();
    });

Scanty

Answer 4

from this page:

$('#example tbody td').click( function () {
    /* Get the position of the current data from the node */
    var aPos = oTable.fnGetPosition( this );

    //...
} );

Secretive

but i am clicking on a button inside a table cell – Aubigny

Answer 5

This is how it works for me. In document ready function I assign converted version of HTML table to a variable and when a button in the is clicked I go through parents/childs with JQuery and send the row you get as a parameter to the library's fnDeleteRow() function.

Here's is the comments from the library function. And an example that's mentioned in library.

/**
* Remove a row for the table
*  @param {mixed} target The index of the row from aoData to be deleted, or
*    the TR element you want to delete
*  @param {function|null} [callBack] Callback function
*  @param {bool} [redraw=true] Redraw the table or not
*  @returns {array} The row that was deleted
*  @dtopt API
*  @deprecated Since v1.10
*
*  @example
*    $(document).ready(function() {
*      var oTable = $('#example').dataTable();
*
*      // Immediately remove the first row
*      oTable.fnDeleteRow( 0 );
*    } );
*/

// And here's how it worked for me.
var oTable;
$("document").ready(function () {
    oTable = $("#myTable").dataTable();
});

//Remove/Delete button's click.
$("a[name='deleteColumn']").click(function () {
    var $row = $(this).parent().parent();
    oTable.fnDeleteRow($row);
});

Kv