Question

在我的Web应用程序中，我希望能够单击数据表中的href链接，该链接会在新页面上加载第二个表，该表又过滤掉行，以便该表仅显示与ID相同的行我在上一个表格/页面中单击的行的ID。

下面的代码不起作用。我相信这是因为在没有时间保存第一个表中的行数据之前，已经打开了一个新的网页，并且保存数据已经太迟了，因为它不再存在。有没有一种方法可以创建回调，以便在打开href链接之前执行我的javascript函数？还是我做的这完全错误？任何帮助将不胜感激。

Datatable.Column（）代码：（用户单击表中的图像/ URL链接）：

"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

这里有多个问题：

ID不能在页面中重复，请改用
$('clickError')是无效的选择器
有问题的元素是动态呈现的，因此在运行代码时不会全部存在。使用事件委托
该行不是<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();

})

Answer 2

对于任何有兴趣的人。我找到了另一种方法。

首先，我将搜索查询/行ID添加到要打开的新页面的网址中，如下所示：

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

然后我从url中提取了搜索查询/ ID，并使用新提取的搜索查询/ ID在新页面上搜索了表格，如下所示：

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

网址上的回调函数？

2 个答案: