23

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.

4
  • Where are you getting your URLs from? you can build your tables with mustache, and pass in the urls from an array ?
    – CAM
    Sep 22, 2011 at 23:29
  • @Cam just building a table layout using datatables. The data is coming from a database and each row will link to a different url.
    – John
    Sep 22, 2011 at 23:31
  • so your URL is indeed associated to the row? and you can access it as an object?
    – CAM
    Sep 22, 2011 at 23:33
  • @Cam yes the url is associated to the row.
    – John
    Sep 22, 2011 at 23:34

10 Answers 10

17

I've use the fnDrawCallback parameter of the jQuery Datatables plugin to make it work. Here is my solution :

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.

0
12

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';
    });
},
1
12
$('#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:

<tr data-href="page.php?id=1">
    <th>Student ID</th>
    <th>Fullname</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Active</th>
</tr>
1
  • 2
    You should use data-href instead because href is not a valid attribute for a tr tag.
    – VDarricau
    Dec 13, 2016 at 10:15
11

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.

$('#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 hover event handling there as well, to give users visual feedback before they click a row.

3
  • 1
    please don't use .delegate(), but use .on('click', 'tbody > tr > td', function(){...})
    – Riki137
    Jan 11, 2019 at 9:24
  • 1
    @Riki137 mind elaborating on why delegate() shouldn't be used? Keep in mind this answer is from 2011...
    – Matt Ball
    Jan 11, 2019 at 18:04
  • 2
    because it's not 2011 anymore
    – Riki137
    Jan 16, 2019 at 22:06
3

You can also use the DataTables plugins api which allows you to create custom renderers.

0

Very cool: JS addon here

And using the fnDrawCallback

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

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

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

0

**I have used a simple solution for this. Add onclick on tr and you are done. Tested with jquery datatable **

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



function link(id){
  location.href = '<?php echo $url ?>'+'/'+id;
   }
1
  • if you want the whole table row as link just make a function in javascript and give your url in location.href and call that function on onclick of <tr> tag the whole row will become a link. you can ask specifically where you are facing problem thanks.
    – Rizwan
    Sep 5, 2018 at 10:09
-1

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');

    } );
} );
1
  • please don't use .live, use .on with a decent jquery version $("#datatable").on('click', 'tbody tr', function() {})
    – maxgalbu
    Jun 4, 2014 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.