Jquery Datatables - 如何使整行成为一个链接

Question

这可能很简单，但是我似乎无法弄清楚。 使用jQuery datatables如何使每一行都可点击并链接到普通页面？所以如果有人将鼠标悬停在任何一行上，整行将高亮显示，并且可以点击链接到我想要的任何URL。

- John

---

你从哪里获取URL？你可以使用mustache构建表格，并从数组中传递URL。 - CAM

@Cam 正在使用 datatables 构建一个表格布局。数据来自数据库，每一行都将链接到不同的 URL。 - John

所以您的URL确实与该行相关联了吗？而且您可以将其作为一个对象进行访问？ - CAM

@Cam 是的，URL 与该行相关联。 - John

Answer 1

我使用了jQuery Datatables插件中的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
  })

}

希望这能帮到你。

- Preview

Answer 2

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

- Johan Morales

---

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

Answer 3

使用行回调函数解决了我的问题。

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

- andialles

---

我应该把这放在哪里？ - Just a coder

Answer 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 事件处理，以便在用户单击行之前为其提供视觉反馈。

- Matt Ball

---

请不要使用 .delegate()，而是使用 .on('click', 'tbody > tr > td', function(){...})。 - Riki137

@Riki137 能否详细说明为什么不应该使用 delegate()？请记住，这个回答是来自2011年的... - Matt Ball

因为现在已经不是2011年了。 - Riki137

Answer 5

你可以使用DataTables插件API，它允许你创建自定义渲染器。

- Dave Newton

Answer 6

我已经使用了一个简单的解决方案。在tr上添加onclick事件即可完成。已经在jquery datatable中进行了测试。

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



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

- Rizwan

---

如果您想将整个表格行作为链接，只需在JavaScript中编写一个函数，并在location.href中提供您的URL，在<tr>标签的onclick事件上调用该函数即可。如果您遇到问题，请具体说明，我们会尽力帮助您解决。 - Rizwan

Answer 7

我认为会是这样的

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

这对我来说很好用

- A.Raouf

Answer 8

很酷：这里的JS插件 并且使用fnDrawCallback函数

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

- John Kloian

Answer 9

您可以通过以下方式使行可点击：

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

- skulled

Answer 10

最近我必须处理datatables中单击行的问题。

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

    } );
} );

- PoX

---

请不要使用.live，而是使用一个合适的jQuery版本来写成$("#datatable").on('click', 'tbody tr', function() {})。 - maxgalbu