在表格行的 href 上单击事件



我用DataTables创建了一个表,每行中的文档都是href'd,并由本地JSON数据填充。

我有一个上下文菜单,其中一个选项是"打开文档",这与单击href并以这种方式打开文档相同。

我正在尝试获取onClick事件将触发的属性(或正确的东西)。然而,由于表数据被集成到DataTables中,我不确定该如何处理。有什么想法吗?

呈现数据表:

$('#km-table-id').DataTable( {
columns: [
// { data: "Blank" },
{ data: "Categories" }, // hidden
{ data: "Blank" },
{ data: "Titles" }
],
columnDefs: [
{
data: "Path", 
ordering:  true, targets: [2],
render: function(data, type, row) { // ---- wraps docs in anchors
return $('<a>')
.attr({target: "_blank", href: row.Path})
.text(data)
.wrap('<div></div>')
.parent()
.html();
},
targets: [2]
},
{ searchable: true, targets: [0], visible: false },
],
data: tableRes,
language: { searchPlaceholder: "Search All Documents" },
lengthMenu: [ 10, 25, 50, 100, 250, 500 ],
order: [],
pageLength: 500,
paging: true,
pagingType: "full_numbers"
});

尝试通过上下文菜单打开文档单击:

$("li[data-action='open']").click(function(evt) {
$(this).attr({target: "_blank", href: row.Path})
});

HTML上下文菜单:

<ul class="custom-menu">
<li data-action="open">Open Document</li>
<li data-action="add" id="add-id">Set As Favorite</li>
<li data-action="email">Email Document</a></li>
</ul>

更新:我找到了一个(有效的)解决方案

基本上,"标题"的DataTable列必须位于最后一个位置,才能与每个复选框正确对应。我相信有一个解决方案,我可以在后面添加列,并且添加复选框也可以,但现在还可以。

$('#km-table-id').DataTable( {
columns: [
{ data: "Blank" },
{ data: "Categories" }, // hidden
{ data: "Blank" },
{ data: "Titles" } // MUST be in last position to respond w/ checkboxes
],
columnDefs: [
{
data: "Path", 
ordering:  true, targets: [3],
render: function(data, type, row) {
return $('<a>')
.attr({target: "_blank", href: row.Path})
.text(data)
.wrap('<div></div>')
.parent()
.html();
},
targets: [3]
},
{ searchable: true, targets: [1], visible: false },
],

etc

最新更新