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

Question

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

score 20 · Accepted Answer · answered Mar 08 '13 at 12:42

20

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
});

answered Mar 08 '13 at 12:42

DKSan

4,187
3
25
35

At the api page search for `Direct and delegated events` and read through it. Hope it helps you out. – DKSan Mar 08 '13 at 12:56
Thanks very much, i found a very good explanation here also http://stackoverflow.com/a/8111171/1387157 – MaVRoSCy Mar 08 '13 at 13:16

score 3 · Answer 2 · answered Dec 18 '16 at 12:46

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

PSR · Answer 3 · 2013-03-08T11:58:18.463

try this

  $("#example tbody").on("click",function(event) {
        $(oTable.fnSettings().aoData).each(function (){
                $(this.nTr).removeClass('row_selected');
        });
        $(event.target.parentNode).addClass('row_selected');
});


  $("#example tr").on("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
    });

we can use events directly on the data which will load when the page is loading.Othersise we need to use on.

nop! it still doesn't work. Again only the first page rows are bound to an event and not the whole dataset — MaVRoSCy, Mar 08 '13 at 12:19

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

3 Answers3

Linked