Javascript Jquery Datatables-使整行成为链接

这也许很简单，但似乎无法理解。使用jQueryDataTables如何使每一行都可以单击以链接到普通页面？因此，如果有人将鼠标悬停在任何一行上，整行都会亮起，可以单击，并链接到我希望单击时链接到的任何url。

用普通的

就足够简单了，但我不明白为什么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');
});

$（'myTableId'）。在（'click'，'tbody>tr>td'，函数（）
{
//“this”指的是当前，如果您需要从中获取信息
打开窗户http://example.com');
});

---

您可能还需要一些

悬停事件处理，以便在用户单击某一行之前提供视觉反馈。
您还可以使用，它允许您创建自定义渲染器。
最近，我不得不处理单击数据表中的某一行的问题

$(document).ready(function() {
    $("#datatable tbody tr").live( 'click',function() {         
    window.open('http://www.example.com');

    } );
} );

我已经使用jQuery的
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
  })

}

希望这会有所帮助。
非常酷：

以及使用fnDrawCallback

  fnDrawCallback: function() {
    this.rowlink();
  },

这是我使用行回调完成的

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

您可以这样做以使行可单击：

<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>


可变的；
$（文档）.ready（函数（）{
oTable=$（“#myTable”）.dataTable({
“ajax”：“getTable.json”，
“fnInitComplete”：函数（oSettings）{
//单击行中的，重定向到ID为的产品页
$（oTable.fnGetNodes（））。单击（函数（）{
var iPos=oTable.fnGetPosition（本）；
var aData=oSettings.aoData[IPO]。\u aData；
//重定向
document.location.href=“product？id=“+aData.id；
} );
},
“列”：[{
“数据”：“id”
}, {
“数据”：“日期”
}, {
“数据”：“状态”
}]
});
});
#
日期
地位

其中#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>


学生证
全名
电子邮件
电话
活跃的
我想会是这样的

$('#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>

桌子上的那一排

$('#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>


{{invoice.ref}
{{invoice.campaign.name}
{{发票到期日{日期：'d-m-Y'}
{{invoice.cost}
暂停的

这对我来说很好
**我使用了一个简单的解决方案。在tr上添加onclick，您就完成了。使用jquerydatatable进行测试**

<tr  onclick="link(<?php echo $id; ?>)">



function link(id){
  location.href = '<?php echo $url ?>'+'/'+id;
   }

您从哪里获取URL？您可以使用mustache构建表，并通过数组传入URL？@Cam只需使用datatables构建表布局。数据来自数据库，每一行将链接到不同的url。那么您的url确实与该行关联了吗？您可以作为一个对象访问它吗？@Cam是的，url与行关联。请不要使用.live，使用.on，使用一个合适的jquery版本
$（“#datatable”）。on（'click'，'tbody tr'，function（）{}）
您应该改用data href，因为href不是tr标记的有效属性。如果您希望整个表行作为链接，只需在javascript中创建一个函数，并在location.href中提供url，然后在单击标记时调用该函数，整行将成为链接。你可以明确地问你在哪里面临问题，谢谢。请不要使用
.delegate（）
，而是使用
.on（'click'，'tbody>tr>td'，function（）{…}）
@Riki137介意详细说明为什么不应该使用
delegate（）
？请记住，这个答案来自2011年……因为现在已经不是2011年了，我该把它放在哪里呢？