Get DOM element from cell() via KeyTable's "focused: true"
Get DOM element from cell() via KeyTable's "focused: true"
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
The
cell
is passed in as an argument to thekey-focus
event handler:Note that
cell()
returns an API instance, you need to use one of the access methods such ascell().node()
to give the node.Allan