これは単純かもしれませんが、理解できないようです。 jquery datatablesを使用して、各行をクリック可能にして通常のページにリンクするにはどうすればよいですか?したがって、誰かが行のいずれかにマウスを合わせると、行全体が強調表示されてクリック可能になり、クリックしたときにリンクしたいURLにリンクします。
バニラでこれを行うのは簡単です<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
イベント処理も必要になるでしょう。
JQueryのfnDrawCallback
パラメーターを使用しました 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
})
}
これがお役に立てば幸いです。
$('#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>
これは、行コールバックを使用してそれを行いました。
fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
responsiveHelper.createExpandIcon(nRow);
$(nRow).click(function() {
document.location.href = 'www.google.com';
});
},
DataTablesプラグインAPI を使用して、カスタムレンダラーを作成することもできます。
そうなると思います
$('#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;
}
あなたはそれを行クリック可能にすることができます:
<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>