0

I try to handle double click event on row for a table with jquery datatables As you can see I try few things, inside fnDrawCallback, inside document ready with on() or directly dblckick() but it never work;-( It only work when I set it up on table element but with that, I do not get the row element ;-(

here is the code:

$(document).ready (function() {
$("#wfTable").dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "server/workflows",
    "bScrollInfinite": true,
   "bScrollCollapse": true,
   "sScrollY": "200px",
   "iScrollLoadGap": 50,
   "aoColumns": [
    { "sTitle": "Id",   "mData": "id" },
    { "sTitle": "Label", "mData": "label" },
    { "sTitle": "Name" ,"mData": "name" }],
    "fnDrawCallback": function (oSettings) {
        var oTable = $('#wfTable TR');
        var theData = oTable.find('TR');
        theData.unbind();
        //  On row click, go to single-view page
        theData.dblclick( function (e) {
            var iPos = oTable.fnGetPosition( this );
            var aData = oTable.fnGetData( iPos );
            var iId = aData[0];
        });
    }
});/*fnServerData  bJQueryUI true*/

//$('#wfTable').dblclick( function (e) {
/*$('#wfTable td').on("dblclick", function() {
    //target = $(e.target);

    //while(target.get(0).tagName != "TR"){
    //  target = target.parent();
    //}
    var iPos = oTable.fnGetPosition( this );
    var aData = oTable.fnGetData( iPos );
    var iId = aData[0];

    window.location.href = 'workflow/' + iId;
});*/

});

1
  • I have near succeed with : $('#wfTable').dblclick( function (e) { //$('#wfTable td').on("dblclick", function() { target = $(e.target); while(target.get(0).tagName != "TR"){ target = target.parent(); } var iPos = oTable.fnGetPosition( target.get() ); var aData = oTable.fnGetData( iPos ); var iId = aData[0]; window.location.href = 'workflow/' + iId; }); but I get a error because can not get nodeName wereas chrome show this attribut in debug mode ;-( Aug 26, 2013 at 21:13

2 Answers 2

0

I found this:

    $('#wfTable').dblclick( function (e) {
    target = $(e.target);

    while(target.get(0).tagName != "TR"){
        target = target.parent();
    }

    var iPos = oTable.fnGetPosition( target.get(0) );
    var aData = oTable.fnGetData( iPos );
    var iId = aData.id;

    window.location.href = 'workflow/' + iId;
});

anyway your code must work too

2
  • This will target a dblclick on your table not on your tablerows. Try to reference a row and therefore reference to a column to get any Id.
    – Mamuz
    Aug 26, 2013 at 21:27
  • e.g. $(document).on("dblclick", "#wfTable tr", function(event) { var id = $("anyColumn", this); });
    – Mamuz
    Aug 26, 2013 at 21:34
0

One working answer from 2023

This code came from the DataTable Forum:

  $(document).ready( function () { 
       var table = $('#example').DataTable(); 
       $('#example tbody').on( 
      'dblclick', 
      'tr', 
      function () { 
        var data = table.row( this ).data(); 
        alert("id is " +  data["0"]); 
      } 
    ); 
   });

We have a datatable, where the id is in the first row (data[0]).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.