Javascript Jquery 数据表 - 使整行成为链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7522586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Datatables - Make whole row a link
提问by John
This maybe simple, but cant seem to figure it out. Using jquery datatables how can I make each row clickable to just link to a normal page? So if someone moused over any of the row the whole row will hightlight and be clickable and link to whatever url I would want it to link to when clicked.
这可能很简单，但似乎无法弄清楚。使用 jquery 数据表如何使每一行可点击以链接到普通页面？因此，如果有人将鼠标悬停在任何一行上，整行将突出显示并可点击并链接到我希望它在点击时链接到的任何 url。
采纳答案by Matt Ball
It's simple enough to do this with a vanilla <table>, but I don't see why this wouldn't work with a jQuery DataTables one either.
用 vanilla 做到这一点很简单<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');
});
You'll probably want some hoverevent handling there as well, to give users visual feedback before they click a row.
您可能还需要hover在那里进行一些事件处理，以便在用户单击一行之前向用户提供视觉反馈。
回答by Balthazar
I've use the fnDrawCallbackparameter of the jQuery Datatables pluginto make it work. Here is my solution :
我使用了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
})
}
Hope this will help.
希望这会有所帮助。
回答by andialles
This did it for me using the row callback.
这是使用行回调为我完成的。
fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
responsiveHelper.createExpandIcon(nRow);
$(nRow).click(function() {
document.location.href = 'www.google.com';
});
},
回答by Johan Morales
$('#myTable').on( 'click', 'tbody tr', function () {
window.location.href = $(this).data('href');
});
where #myTable is the ID of the table, and you need put the href in the tr, like that:
其中#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>
回答by Dave Newton
You can also use the DataTables plugins apiwhich allows you to create custom renderers.
您还可以使用DataTables 插件 api，它允许您创建自定义渲染器。
回答by skulled
You can do that to make row clickable :
您可以这样做以使行可点击：
<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>
回答by John Kloian
Very cool: JS addon here
非常酷：这里有 JS 插件
And using the fnDrawCallback
并使用 fnDrawCallback
fnDrawCallback: function() {
this.rowlink();
},
回答by A.Raouf
I think it will be like that
我想会是这样
$('#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;
});
}
});
And the table row like that
和这样的表格行
<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>
This worked fine with me
这对我来说很好用
回答by Rizwan
**I have used a simple solution for this. Add onclick on tr and you are done. Tested with jquery datatable **
**我为此使用了一个简单的解决方案。在 tr 上添加 onclick 就完成了。用jquery数据表测试**
<tr onclick="link(<?php echo $id; ?>)">
function link(id){
location.href = '<?php echo $url ?>'+'/'+id;
}
回答by PoX
Recently I had to deal with clicking a row in datatables.
最近我不得不处理点击数据表中的一行。
$(document).ready(function() {
$("#datatable tbody tr").live( 'click',function() {
window.open('http://www.example.com');
} );
} );
