Jquery数据表 - 将整行设为链接

Question

这可能很简单,但似乎无法弄明白.使用jquery数据表如何使每行可单击以链接到普通页面？因此,如果有人在任何一行上进行了鼠标搜索,那么整行将会突出显示并且可以点击并链接到我希望它在点击时链接到的任何网址.

Answer 1

我使用fnDrawCallbackjQuery Datatables插件的参数使其工作.这是我的解决方案:

fnDrawCallback: function () {

  $('#datatable tbody tr').click(function () {

    // get position of the selected row
    var position = table.fnGetPosition(this)

    // value of the first column (can be hidden)
    var id = table.fnGetData(position)[0]

    // redirect
    document.location.href = '?q=node/6?id=' + id
  })

}

希望这会有所帮助.

Answer 2

用香草做这个很简单<table>,但是我不明白为什么这对于jQuery DataTables也不行.

$('#myTableId').on('click', 'tbody > tr > td', function ()
{
    // 'this' refers to the current <td>, if you need information out of it
    window.open('http://example.com');
});

您可能也希望hover在那里进行一些事件处理,以便在用户单击一行之前为其提供可视反馈.

Answer 3

这对我使用行回调做了.

fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    responsiveHelper.createExpandIcon(nRow);
    $(nRow).click(function() {
        document.location.href = 'www.google.com';
    });
},

Answer 4

$('#myTable').on( 'click', 'tbody tr', function () {
  window.location.href = $(this).data('href');
});

其中#myTable是表的ID,你需要将href放在tr中,如下所示:

<tr data-href="page.php?id=1">
    <th>Student ID</th>
    <th>Fullname</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Active</th>
</tr>