how can i delete the current row using fnDeleteRow on a button click inside a cell

akantro1

i have a button in each row that says "remove". i want to click on it and have that row be removed. is there anyway to do this?

allan

Hi akantro1,

Yes indeed - make use of the fnDeleteRow() API function: http://datatables.net/api#fnDeleteRow

Regards,
Allan

salesawagner

in the above example the function are erasing the line for the index, I wanted to call a function passing the id parameter of the line and delete, hide or anything like that, for example [code]$("#IDROW). hide ()[/code] or if
[code]
function delete(IDROW){

oTable.fnDeleteRow ($ (IDROW));

[/code]

is to do?

sorry errors google translate: D

allan

You need to pass it a DOM node, not a jQuery object:

[code]
oTable.fnDeleteRow( $(IDROW)[0] );
[/code]
Allan

salesawagner

still do not understand ...
[code]var oTable;

$(document).ready(function() {
oTable = $('#example').dataTable();

/* Immediately remove the first row. You wouldn't want to do it this way... */
oTable.fnDeleteRow( 0 );
} );[/code]
here you say how do I delete the first line, in my case I want to erase a line at random, you can give me an example?

allan

I won't normally write the code, but this should be fairly easy to do with the API:

[code]
$(document).ready(function() {
var oT = $('#example').dataTable();
$('#example tbody tr').live('click', function () {
oT.fnDeleteRow( this );
} );
} );
[/code]
Works well with my demo tables. Click on any row to delete it.

Allan

salesawagner

[code]$(document).ready(function() {
var oT = $('#example').dataTable();
$('#example tbody tr').live('click', function () {
oT.fnDeleteRow( this );
} );
} );
[/code]
problem :
oSettings.aoData[iAODataIndex] is undefined
http://localhost/pernambucano/app/Public/js/datatable/jquery.dataTables.js
Line 1342

allan

Can you put a live example on the web please - so I can see what is actually happening. As I noted, that code works no problem for me - so there must be something else going on.

Allan

salesawagner

Allan thank you!
the code you entered was correct, the version of my datatable that was outdated
:)

corpse

I'm reviving this older thread because I'm trying to accomplish the same thing..

The OP had asked about using a button, but all the comments and code above seem to only allow you to remove the row by clicking a cell in the row.. I have a "remove" link that appears in each row.. When clicking only the link, I want it to remove the row. But alas, I can't get it to trigger right.. My link has an ID of deleteme

How do I accomplish this? Here's my current code:
[code]
$(document).ready(function() {
$('#tb tbody td').click( function () {
var aPos = oTable.fnGetPosition( this );
oTable.fnDeleteRow(aPos[0],null,true);
} );

var oTable = $('#tb').dataTable( {
"bPaginate": true,"sPaginationType": "full_numbers","bAutoWidth": false,"bLengthChange": false, "bFilter": true } );
} );
[/code]

the html (in part), looks like:
[code]
[X]
[/code]
Thanks.. Tom

allan

What looks a bit dodgy about that code is that you are 'using' oTable before declaring it. Are you getting an JS errors or anything? What does happen with this code? Also I presume you'll want to modify the selector to use the 'A' tag, rather than the cell, and the use the 'A' tag's parentNode.

Allan

corpse

I agree with your dodgy code comment - it looks weird to me too, but it was the only way it would seem to work (I'm still very new to both jquery stuff and your DataTables).. Anyways, the above code DOES work, with no JS errors (in my firefox anyways, haven't tested in other browsers yet)..

With the A tag having an ID of deleteme, I tried stuff like:
$('#deleteme a')
But that didn't seem to work.. Maybe I just have more to learn about selectors. I also tried $('#tb tbody td a')

EDIT:
I'm assuming the code above works because although it appears to be using oTable first, maybe because it's in a function that isn't technically called until the click event happens - so the oTable really gets set during the .ready event, and then when the click does occur, the oTable is set.

thx!

allan

If the 'A' tag has an id of 'deleteme' then just use $('#deleteme') - or document.getElementById('deleteme'). One option to make the code look more 'sane' might be:

[code]
$(document).ready(function() {
var oTable = $('#tb').dataTable( {
"bPaginate": true,"sPaginationType": "full_numbers","bAutoWidth": false,"bLengthChange": false, "bFilter": true } );

$('td', oTable.fnGetNodes()).click( function () {
oTable.fnDeleteRow(this.parentNode,null,true);
} );
} );
[/code]
Note that I've dropped the fnGetPosition. It should work fine - but you can pass in a TR node to fnDeleteRow which will just save a single line of code :-)

Allan

corpse

I changed the td to a, and it works perfect.. Thank you very much Allan!