Настройка функциональности jQuery DataTables в приложении JSF - PullRequest
Новая
       23

Настройка функциональности jQuery DataTables в приложении JSF

0 голосов
/ 04 апреля 2019

Я новичок в JSF и в настоящее время пытаюсь реализовать некоторые пользовательские функции в виджете DataTables - это включает в себя пользовательские функции фильтра, а также обработчики для таких событий, как нажатие на ячейки (например, вставьте их содержимое в глобальное поле фильтра).), щелчок по нажатию на заголовки столбцов (копирование данных столбца для вставки в буфер) и пользовательская функция экспорта, связанная с кнопкой.

Ранее я добавил эту функцию в прототип экземпляра DataTables, написав JS для запуска клиента.-боковая сторона.Однако, когда я пытаюсь включить их непосредственно в мой проект JSF, я нахожу, что они конфликтуют с JS, который используется JSF.

Я поместил свой пользовательский javascript в файлы в подкаталоге / resources / js моего JSFproject. 

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);

        }

    });

};

И в мои файлы xhtml я включаю JS примерно так: 

<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" />

Включение собственного JS напрямую приводит к сбою загрузки приложения или появлению сообщений об ошибках.в серверных консолях JS или GlassFish (скажем, jQuery недоступен, тогда приложение перестает работать, когда я вручную включаю jquery-latest.min.js).Я проверил все мои JS в JSFiddle и моей тестовой среде - я уверен, что проблема не в самом коде.

Мой вопрос заключается в том, как лучше настроить DataTables в моем приложении.Нужно ли мне расширять PrimeFaces или есть (надежный) обходной путь для передачи моего пользовательского JS в браузер, как раньше?

...