I'm trying to find a way to let users select a cell in a JS DataTable and detect the select event.
I've attached DataTablesTest.js (also inline, below). Simply create a new report, use any arbitrary data module (it's not necessary to pass data or provide any configuration), create a custom control that points to DataTablesTest.js, like this:
Run the report, look at the output:
Open a console and look at the JS output when sorting either column:
So the event handler for table draw is working properly:
table.on('draw', function() {
console.log('Table redraw');
});
Now click on any cell in the table, which should fire the select event.
table.on('select', function(e, dt, type, indexes) {
console.log('Table select');
if (type === 'cell') {
let cell = dt.cell({ selected: true });
if(cell.index().column === 0) {
console.log(cell.data());
}
else if(cell.index().column === 1) {
console.log(cell.data());
}
cell.deselect()
}
});
However, there is no JS output in the console when a cell is selected.
I've confirmed that the JS works fine outside of the Cognos environment. See
http://live.datatables.net/hewitati/1/edit. Both the draw and select events produce output in the console:
In the above output it shows that I've selected the table ("Table select"), the JS logs to the console the data contained in the selected cell (e.g. -2, "Name 5") and I've sorted the columns ("Table redraw").
Here's DataTablesTest.js:
define([
'jquery',
'https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/sl-1.3.0/datatables.min.js'
],
function($, DataTables) {
"use strict";
function DataTablesSimpleList() {}
DataTablesSimpleList.prototype.draw = function(oControlHost) {
$('<link>')
.appendTo('head')
.attr({
"type": 'text/css',
"rel": 'stylesheet',
"href": 'https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css'
});
let htmlElement = oControlHost.container;
htmlElement.innerHTML = '<table id="example" class="display" width="100px"></table>';
let queryData = [
[-2, 'Name 1'],
[-56.3, 'Name 2'],
[6.1, 'Name 3'],
[100, 'Name 4'],
[13.8, 'Name 5'],
[0, 'Name 6'],
[-15.2, 'Name 7'],
[0.86, 'Name 8'],
[-4.8, 'Name 9'],
[-33.6, 'Name 10'],
[-75.2, 'Name 11'],
[48, 'Name 12'],
[66.6, 'Name 13'],
[22.5, 'Name 14'],
[-49.9, 'Name 15'],
[-98.6, 'Name 16']
];
$(document).ready(function() {
let tableNode = $('#example');
let table = tableNode.DataTable({
"paging" : false,
"select": { "style": 'single', "items": 'cell' },
"order": [],
"data": queryData,
"columns": [
{"title": "Activity", "sClass": "center"},
{"title": "Name", "sClass": "center"}
]
});
table.on('draw', function() {
console.log('Table redraw');
});
table.on('select', function(e, dt, type, indexes) {
console.log('Table select');
if (type === 'cell') {
let cell = dt.cell({ selected: true });
if(cell.index().column === 0) {
console.log(cell.data());
}
else if(cell.index().column === 1) {
console.log(cell.data());
}
cell.deselect()
}
});
});
};
return DataTablesSimpleList;
}
);
Any ideas on what change(s) I need to make to DataTablesTest.js in order for the select event to work properly within the Cognos environment?
------------------------------
Patrick Garner
------------------------------
#CognosAnalyticswithWatson