[Webinar] Streamline your web hosting managementRegister Today

  • Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 434
  • Last Modified:

How can I make a row clickable in Datatables?

I am using jQuery Datables with Ajax, so my rows are created dynamically when the datatable loads. Does anyone know how I can make the row, or a column clickable? I'd like to make it so when a user clicks a row, or one of the items in a column it links them to another page. In the URL they click, I will need to include data from one of the columns in that row. For example, if someone clicked the first row below, I'd want to send them to a url: www.myshop.com/newcar.html?ID=77

ID     Carname    Cartype
77     carA            chevy
76     carB            dodge
1 Solution
Michael VasilevskySolutions ArchitectCommented:
Use the mousedown event to open a new window, e.g.:

$( "#myRow" ).on("mousedown", ".clickableRow", function(event) {
        window.open('www.myshop.com/newcar.html?' + $(this).attr('id'), '_blank');

Open in new window

Where myRow is the ID of the container holding your rows, clickableRow is a class assigned to all your clickable rows, and 'id' is the id of the row, e.g. 77.

Hope this helps!

earwig75Author Commented:
Note: I ended up using this, but Michael's example is also valid.
$(document).ready(function() {
    var table = $('#example').DataTable();
    $('#example tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );
} );

Open in new window


Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now