这可能很简单，但似乎无法弄清楚。使用 jquery 数据表如何使每一行可点击以链接到普通页面？因此，如果有人将鼠标悬停在任何一行上，则整行将突出显示并且可点击并链接到我希望它在点击时链接到的任何 url。
【问题讨论】：
标签： javascript jquery datatables
我使用了 jQuery Datatables plugin 的 fnDrawCallback 参数使其工作。这是我的解决方案：
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
})
}
希望这会有所帮助。
【讨论】：
这是使用行回调为我完成的。
fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
responsiveHelper.createExpandIcon(nRow);
$(nRow).click(function() {
document.location.href = 'www.google.com';
});
},
【讨论】：
$('#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>
【讨论】：
用香草<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 事件处理，以便在用户单击一行之前为他们提供视觉反馈。
【讨论】：
.delegate()，而是使用.on('click', 'tbody > tr > td', function(){...})
delegate()？请记住，这个答案来自 2011 年...
您还可以使用DataTables plugins api，它允许您创建自定义渲染器。
【讨论】：
【讨论】：
您可以这样做以使行可点击：
<script type="text/javascript">
var oTable;
$(document).ready(function() {
oTable = $('#myTable').dataTable({
"ajax" : "getTable.json",
"fnInitComplete": function ( oSettings ) {
//On click in row, redirect to page Product of ID
$(oTable.fnGetNodes()).click( function () {
var iPos = oTable.fnGetPosition( this );
var aData = oSettings.aoData[ iPos ]._aData;
//redirect
document.location.href = "product?id=" + aData.id;
} );
},
"columns" : [ {
"data" : "id"
}, {
"data" : "date"
}, {
"data" : "status"
}]
});
});
</script>
<table id="myTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Status</th>
</tr>
</thead>
<tbody></tbody>
</table>
【讨论】：
我想会是这样的
$('#invoice-table').dataTable({
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var slug = $(nRow).data("slug");
$(nRow).attr("href", "/invoices/" + slug + "/");
$(nRow).css( 'cursor', 'pointer' );
$(nRow).click(function(){
window.location = $(this).attr('href');
return false;
});
}
});
还有这样的表格行
<tr class="invoice_row" data-slug="{{ invoice.slug }}">
<td>{{ invoice.ref }}</td>
<td>{{ invoice.campaign.name }}</td>
<td>{{ invoice.due_date|date:'d-m-Y' }}</td>
<td>{{ invoice.cost }}</td>
<td>
<span class="label label-danger">Suspended</span>
</td>
</tr>
这对我很有效
【讨论】：
**我为此使用了一个简单的解决方案。在 tr 上添加 onclick 就完成了。用jquery数据表测试**
<tr onclick="link(<?php echo $id; ?>)">
function link(id){
location.href = '<?php echo $url ?>'+'/'+id;
}
【讨论】：
最近我不得不处理单击数据表中的一行。
$(document).ready(function() {
$("#datatable tbody tr").live( 'click',function() {
window.open('http://www.example.com');
} );
} );
【讨论】：
$("#datatable").on('click', 'tbody tr', function() {})