Get Row Position

jcrawford

Hello Everyone,

I have a table which has a column that contains a checkbox. There is a button outside of DataTables that has an onclick event which will read the values of the checkboxes and make ajax requests to delete those rows from the server side.

This is working however I have found that I need to remove the exact rows where the checkboxes are clicked when the ajax returns success for each row. I have looked at the api and found that you can use fnDeleteRow( position ); and fnGetPosition() to get the position. However in my case it is not the tr or td element that is clicked. It is a checkbox being checked and then when the button is pressed it reads those checkbox values.

Is there a way to get the position from my checkbox elements in the table rather than having to somehow hijack the td or tr elements?

jcrawford

I should mention that I am not using server side to populate this table. At-least not the server side type you see in the examples here.

When the page first loads it generates the table in the HTML page. However when you use the add new row feature it makes an ajax call to an external site, fetches the data and uses fnAddData() to add the new rows.

I am stating this because I cannot always assume that the row will be in the HTML page. I am not sure if this makes a difference or not but I have seen this: http://www.datatables.net/forums/discussion/192/using-fngetposition-on-dynamic-tables/p1 which is why I mention this.

fbas

get the parent/ancestor of the checkbox that is your TD or TR.

http://api.jquery.com/closest/

$(checkbox).closest('tr').get(0);

is that what you mean?

jcrawford

thanks very much that should do the trick. I will test this out in a few minutes and update with if it worked or not.

jcrawford

This did not work for me for some reason.

I mean your code gets the index properly but I then get the following error from JQuery

[code]
a.nodeName is undefined
[/code]

Here is my code that is being executed:

[code]
if(confirm('Are you sure you wish to delete the selected test users?')) {
$(".testUser_Checkbox:checked").each(function() {
var user_id = $(this).val();
$.ajax({
url: '/admin/qatooldeletetestuser/?user='+user_id,
blockUI: true,
success: function(data) {
oTable.fnDeleteRow( oTable.fnGetPosition( $(this).closest('tr').get(0) ) );
$.jGrowl('Deleted User '+user_id);
},
});
});
}
[/code]

I think the error is coming from the use of $(this) inside the success callback. I am not quite sure how I could get at the data there but that's where I need it to happen on the successful response from the ajax call. Any thoughts?

jcrawford

I got it working with the below code so THANK YOU :)

[code]
if(confirm('Are you sure you wish to delete the selected test users?')) {
$(".testUser_Checkbox:checked").each(function() {
var user_id = $(this).val();
var indexOfRow = oTable.fnGetPosition( $(this).closest('tr').get(0) );
$.ajax({
async: false,
url: '/admin/qatooldeletetestuser/?user='+user_id,
blockUI: true,
success: function(data) {
oTable.fnDeleteRow( indexOfRow );
$.jGrowl('Deleted User '+user_id);
},
});
});
}
[/code]

jcrawford

I did have to turn async off though otherwise the each loop iterated faster than the success could be called which led to it removing the improper indexed rows from the table. Just FYI for anyone else who reads this.