How do I select the current row (ie. one containing a button)?

How do I select the current row (ie. one containing a button)?

winwaedwinwaed Posts: 3Questions: 1Answers: 0

I have been searching quite a bit, but only found examples which use older versions and they don't seem to work. I'm working with the latest DataTables 1.10.

I am loading data using Ajax (pretty nifty :-) ). One of the data columns contains a <a> button with an onclick handler that is intended to delete the row:

function deleteProcNews(event)  {
 var $row = $(this).closest("tr"); 
 $row.remove();
}

My understanding is that the remove() is correct, but the $row selector is wrong. So how can I select the DataTable row that contains the button that fires the event?

Yes I know I could send a 'delete' call to the server and then refresh the ajax data. However, I'd like to change the client view first, and then quietly do the server update in the background. This will appear more responsive to the user. It also simplifies the ajax refreshes.

Answers

  • winwaedwinwaed Posts: 3Questions: 1Answers: 0
    edited May 2014

    I had a few issues (eg. needing to call draw()), but my main issue looks to be a closure issue when creating HTML tags within the AJAX data. Ie. this in the callback was not referring to the a href. Hence it could not find the parent tr row element.

    As it happens I need to parameterize the callback so that I can send my server update. I also added an id to each of the a href tags (id number with a pn prefix), and here is my working callback:

    function deleteProcNews(id) {
    
    t = $( "a#pn" + (id) );
    
    pntable.row( t.parents('tr').get(0) ).remove().draw();
    
    }
    
    
  • sunildonsunildon Posts: 40Questions: 7Answers: 0
    edited May 2014

    If i understood your question correctly , you are looking for how to select a row & get details
    well then, its a very simple one i done this once it worked and will work .

    Check this :
    $("#myDataTable tbody tr").live('click', function (event) {
    var data1 = oTable.fnGetData(this);
    sel = data1[0]; //This wil fetch you the required column value
    $("#myDataTable tbody tr").removeClass('row_selected');
    $(this).addClass('row_selected');
    });

    ps: I used js 1.7 & 1.9.4 datatable i guess

    Regards

  • winwaedwinwaed Posts: 3Questions: 1Answers: 0

    Thanks. Yes I'm using 1.10. I tried some of the old api but that was failing (probably because my this selector wasn't working).

    The code in my comment works - unfortunately I can't mark my own comments as "answered".

This discussion has been closed.