Get DOM element from cell() via KeyTable's "focused: true"

Get DOM element from cell() via KeyTable's "focused: true"

MormoranMormoran Posts: 1Questions: 1Answers: 0

I have a table:

var table = $('#dataTable').DataTable({
"lengthMenu": [ [15, 30, 45, 60, -1], [15, 30, 45, 60, "All"] ],
"orderMulti": true,
"stateSave": true,
"pagingType": "full_numbers",
"autoWidth": false,
"pageLength": 15,
"dom": '<C<f><i><l><B<"clear">><p>rt>',
buttons: [
    {
        extend:    'copyHtml5',
        text:      '<i class="fa fa-copy"></i>',
        titleAttr: 'Copy'
    },
    {
        extend:    'excelHtml5',
        text:      '<i class="fa fa-file-excel"></i>',
        titleAttr: 'Excel'
    },
    {
        extend:    'csvHtml5',
        text:      '<i class="fa fa-file-alt"></i>',
        titleAttr: 'CSV'
    },
    {
        extend:    'pdfHtml5',
        text:      '<i class="fa fa-file-pdf"></i>',
        titleAttr: 'PDF'
    }
],
'keys': true
});

And a bit of jQuery for KeyTables:

table.on( 'key-focus', function () {

    // The cell, returns an API object, but I don't know how to get the DOM
    // element from this API object
    var cell = table.cell( { focused: true });

    // The node, returns the actual TD, seemingly as an object.
    // I can't seem to be able to do node.find('input'); though, it says
    // node.find is not a function, so I suspect it's not an actual DOM
    // element?
    var node = table.cell( { focused: true } ).node();

    // The data, returns raw HTML as a string
    var data = table.cell( { focused: true } ).data();

    // This doesn't work. Gives an error (node.find is not a function)
    console.log(node.find('input'));
});

I can't seem to be able to get the DOM element so I can do jQuery stuff on it with it. If I try to do stuff like this:

var node = table.cell( { focused: true } ).node();`

if (node.find('a')) {
    console.log("Cell has a link!");
};

I get an error: "node.find is not a function".

My end goal with this is to allow the user to navigate the table with the keyboard (this is possible now, by default), and if they are on a cell with a checkbox (the very first column is all checkboxes), allow them to press spacebar to check the checkbox.

I can't even seem to be able to detect what type of element is inside the cell!

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,075Questions: 1Answers: 10,384 Site admin
    Answer ✓

    The cell is passed in as an argument to the key-focus event handler:

    table.on( 'key-focus', function ( e, dt, cell, orig ) {
      var cellNode = cell.node();
      var input = $( 'input', cellNode );
      ...
    }
    

    Note that cell() returns an API instance, you need to use one of the access methods such as cell().node() to give the node.

    Allan

This discussion has been closed.