Функция обратного вызова на URL?

Question

В моем веб-приложении я хочу иметь возможность щелкать ссылку href внутри таблицы данных, которая загружает вторую таблицу на новую страницу, которая, в свою очередь, отфильтровывает строки, так что в таблице отображаются только строки с таким же идентификатором, какидентификатор строки, по которой я щелкнул в предыдущей таблице / странице.

Код ниже не работает.Я полагаю, что это потому, что прежде чем он успел сохранить данные строк из первой таблицы, новая веб-страница уже открыта, и уже слишком поздно сохранять данные, поскольку их больше нет.Есть ли способ создать обратный вызов, чтобы моя функция javascript выполнялась до открытия ссылки href?Или, может быть, я делаю это совершенно неправильно?Мы будем благодарны за любую помощь.

Код Datatable.Column (): (пользователь нажимает на ссылку на изображение / ссылку в таблице):

"data": "ErrorCount",
"render": function (data, type, row) {
         if (type === 'display') {
         return (data === 0)
         ? data = '<span data-search="0"></span>'
         : data = '<a id="errors" href="http://localhost/WTM/LogError/Index" type="hidden" class="fas fa-exclamation-triangle" style="color:red"></a>';
         }
         return data;
   },

Функция фильтра JavaScript:

var clickError = document.getElementById("errors")
var xTable = $('#WTM_LOG').DataTable();
var yTable = $('#LOG_ERROR').DataTable();

$('clickError').click(function () {

     var rowData = xTable.row(this).data();                        

     yTable.columns(0).search(rowData.TaskSchedulerLogUid).draw();
});

Answer 1

Для всех, кто заинтересован.Я нашел другой способ сделать это.

Сначала я добавил поисковый запрос / идентификатор строки в URL новой страницы, которую я хотел открыть, следующим образом:

'<a href="http://[url]' + row.[column name] + '"></a>

, затем я извлекпоисковый запрос / идентификатор из URL-адреса и поиск в таблице на новой странице с использованием вновь извлеченного поискового запроса / идентификатора, например:

var queryString = window.location.search;
queryString = queryString.substring(4);
if (queryString == null) {
throw "Error: id is null"
} else {
WtmDetails.vars.secondaryTable.columns(0).search(queryString).draw();
}

Answer 2

Несколько проблем здесь:

1. Идентификаторы не могут повторяться на странице, вместо этого используйте класс

2. $('clickError') - недопустимый селектор

3. Рассматриваемые элементы отображаются динамически и, следовательно, не будут существовать во время выполнения кода.Использовать делегирование события

4. Строка не является <a>

Исправления:

HTML

'<a ̶i̶d̶=̶"̶e̶r̶r̶o̶r̶s̶"̶ class="errors"...

JS

$('#tableID').on('click', 'a.errors', function(e){
    e.preventDefault();
    var row = $(this).closest('tr')[0]; 
    var rowData = xTable.row(row).data();
    yTable.columns(0).search(rowData.TaskSchedulerLogUid).draw();

})