如何为角度数据表中的表行创建超链接

时间:2018-05-25 13:30:05

标签: jquery angular angular-datatables

在我的场景中,我想为整个表行应用超链接,现在它对一行中的表列工作正常,但我想将它应用于整行而不仅仅是列。 在我的情况下,在表格行中点击它需要打开实体的详细信息页面,例如,A1,A2,如。

<table class="display" id="example">
    <thead>
    <tr>
        <th>Information</th>
        <th>Link</th>
    </tr>
 </thead>
</table>

var responseObj = [
 { "information": "A1", "weblink": "http://www.microsoft.com" },
    { "information": "A2", "weblink": "http://www.yahoo.com" },
    { "information": "A3", "weblink": "http://www.google.com" },
    { "information": "A4", "weblink": "http://www.duckduckgo.com" }
];

$('#example').dataTable({
 "data": responseObj,
"columns": [
      { "data": "information" }, 
      { 
     "data": "weblink",
     "render": function(data, type, row, meta){
        if(type === 'display'){
            data = '<a href="' + data + '">' + data + '</a>';
         }

            return data;
        }
     } 
 ]
});

2 个答案:

答案 0 :(得分:0)

如果要在angular2或plus版本中构建应用程序,可以使用ng-smart-table组件列出数据。您也可以通过简单的方式提供编辑链接。排序和分页也是内置的。

您可以在此处找到组件详细信息。 https://www.npmjs.com/package/ng2-smart-table

答案 1 :(得分:0)

//在下面应用点击事件

$('#example').delegate('tbody > tr > td', 'click', function ()
{
    // 'this' refers to the current <td>, if you need information out of it
    window.open('http://example.com');
});
You'll probably want some hover event handling there as well, to give users visual feedback before they click a row.