I am new to JSF and currently trying to implement some custom functionality in a DataTables widget -- this includes custom filter functions, as well as handlers for events such as clicking on cells (say, paste their content into the global filter box), shift-clicking on column headers (copy column data to paste buffer), and a custom export function bound to a button.
I had previously added this functionality to a prototype DataTables instance by writing JS to run client-side. However, when I try to include these directly in my JSF project, I find they conflict with the JS as used by JSF.
I have put my custom javascript in files in the /resources/js subdirectory of my JSF project.
const enableTableColsCopy = (tableName) => {
$(`#${tableName} thead`).on('click', 'th', function (e) {
if (e.shiftKey) {
let thisTable = $(`#${tableName}`).DataTable();
let selColIndex = thisTable.column($(this)).index();
let selColName = $(thisTable.column(selColIndex).header()).html();
let tabData = tableToJSON($(`#${tableName}`));
let selColCells = [];
for (let idx in tabData) {
selColCells.push(String(tabData[ idx ][ selColName ]).trim());
}
selColCells = `(${selColCells.join('|')})`;
copyToClipboard(selColCells);
}
});
};
And within my xhtml files I include the JS like so:
<h:outputScript library="js" name="customiseTable.js"/>
<!-- ... at some point later, for the sake of example ... -->
<p:commandButton id="exampleButton" type="button" onclick="enableTableColsCopy('someTableName')" value="Enable custom copy" style="float:left" icon="pi pi-align-justify" />
Including custom JS directly leads to the application failing to load, or the appearance of error messages in the JS or GlassFish server consoles (say, jQuery is not available, then the application stops working when I manually include jquery-latest.min.js). I have validated all my JS in JSFiddle and my test environment – I am sure that the problem is not with the code itself.
My question is then, how best to customise DataTables within my application. Would I need to extend PrimeFaces, or is there a (robust) workaround to get my custom JS to the browser, as before?
