Jquery Datatables - 使整行成为链接

Posted 2023-05-07

【中文标题】Jquery Datatables - 使整行成为链接

【英文标题】：Jquery Datatables - Make whole row a link

【发布时间】：2011-11-23 06:26:36

【问题描述】：

这可能很简单，但似乎无法弄清楚。使用 jquery 数据表如何使每一行可点击以链接到普通页面？因此，如果有人将鼠标悬停在任何一行上，则整行将突出显示并且可点击并链接到我希望它在点击时链接到的任何 url。

【问题讨论】：

您从哪里获取 URL？你可以用小胡子构建你的表，并从数组中传递 url？

@Cam 只是使用数据表构建表格布局。数据来自数据库，每一行将链接到不同的 url。

所以您的 URL 确实与该行相关联？您可以将其作为对象访问吗？

@Cam 是的 url 与行相关联。

【参考方案1】：

我使用了 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
  )

希望这会有所帮助。

【参考方案2】：

这是使用行回调为我完成的。

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

【讨论】：

我把这些放在哪里？

【参考方案3】：

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

【讨论】：

您应该改用 data-href，因为 href 不是 tr 标签的有效属性。

【参考方案4】：

用香草<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()...)

@Riki137 想详细说明为什么不应该使用delegate()？请记住，这个答案来自 2011 年...

因为已经不是 2011 年了

【参考方案5】：

您还可以使用DataTables plugins api，它允许您创建自定义渲染器。

【参考方案6】：

非常酷：JS addon here

并使用 fnDrawCallback

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

【参考方案7】：

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

<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" >
    <thead>
        <tr>
            <th>#</th>
            <th>Date</th>
            <th>Status</th>
        </tr>
    </thead>
<tbody></tbody>
</table>

【参考方案8】：

我想会是这样的

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

这对我很有效

【参考方案9】：

**我为此使用了一个简单的解决方案。在 tr 上添加 onclick 就完成了。用jquery数据表测试**

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



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

【讨论】：

如果您想将整个表格行作为链接，只需在 javascript 中创建一个函数并在 location.href 中提供您的 url 并在 标记的 onclick 上调用该函数，整个行将成为一个链接。您可以具体询问您在哪里遇到问题，谢谢。

【参考方案10】：

最近我不得不处理单击数据表中的一行。

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

     );
 );

【讨论】：

请不要使用 .live，使用 .on 和一个像样的 jquery 版本$("#datatable").on('click', 'tbody tr', function() )