Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Datatables, how to bind event on all rows of the table

My datatable is working fine except the fact that i am trying to add a dblclick functionality on each row, which that works partially.

So, this is my code:

oTable = $('#example').dataTable({
    "aaSorting": [[ 1, "desc" ]],
    "bJQueryUI": true,
    "sPaginationType": "full_numbers"
});

/* Add a click handler to the rows */

//This highlights the row selected
$("#example tbody").click(function(event) {
        $(oTable.fnSettings().aoData).each(function (){
                $(this.nTr).removeClass('row_selected');
        });
        $(event.target.parentNode).addClass('row_selected');
});

//this attaches a dblclick event on the row
$("#example tr").dblclick(function() {
        var iPos = oTable.fnGetPosition( this );
        var aData = oTable.fnGetData( iPos );
        var iId = aData[1];
        $('#edit'+iId).click(); //clicks a button on the first cell
});

The highlighting of rows is ok for all rows of the tables, but the dblclick is working ONLY for the rows that where initially rendered in the first page. When I sort/search data and the data displayed change, the dblclick event does not work for those rows that where not displayed in the first page.

Can anyone help to solve this mystery? Thanks

like image 953
MaVRoSCy Avatar asked Mar 08 '13 11:03

MaVRoSCy


2 Answers

The first answer is near perfect, but has to have one little tweak that stops it from working.

As in the jquery apidoc on() you have to add the [, selector ] as i did below with the "tr"

$("#example").on("dblclick", "tr", function() {
        var iPos = oTable.fnGetPosition( this );
        var aData = oTable.fnGetData( iPos );
        var iId = aData[1];
        $('#edit'+iId).click(); //clicks a button on the first cell
});
like image 179
DKSan Avatar answered Sep 30 '22 14:09

DKSan


in case you need a different but similar scenario to bind to all specific classes inside datatable see below sample

$("#sample_2 tbody").on("click", "a.ApproveLink", approveLinkHandler);

also consider following official doc about this issue:

One of the best ways of dealing with this is through the use of delegated events with jQuery's on method

https://datatables.net/examples/advanced_init/events_live.html

like image 29
Iman Avatar answered Sep 30 '22 15:09

Iman