How can I make a row clickable in ajax Datatables?

I am using the below code to create an Ajax DataTable. I want to make a row clickable, and have it open a URL using data from one or more of the columns. So, if there is a row with 2 columns, ID and CarType, and that row is clicked, I want the browser to go to the follwing URL when the row is clicked:

This works fine for the first load, but if you perform a search, or the contents dynamically change  and the table is re-drawn, it fails. Can someone please assist?

	function searchCars() {

		// clear the search results
		$("#carsTable tbody").empty();
		// search criteria when form is submitted
		var carType = $("#carType").val();
		var carColor = $("#carColor").val();

		// url to php
		var url = "CarTypes.PHP";

		// argument(s) to add to the url
		url += "&carType=" + carType;
		url += "&carColor=" + carColor;

		var carTable = $('#carsTable').DataTable({
			"order": [
				[ 0, "desc" ]
			"BAutoWidth": true,
			//"stateSave": true,
			"bFilter": false,
			"ajax": url,
			"sAjaxDataProp": "DATA",
			"processing": true,
			// export button 
			"dom": 'Blfrtip',
			"columnDefs": [
				{"visible": false,"targets": [1]}
			buttons: [
			extend: 'collection',
			titleAttr: 'Utility',
			autoClose: true,
			className: 'btn btn-primary btn-xs',
			buttons: [
			aLengthMenu: [
				[5, 25, 100, -1],
				[5, 25, 100, "All"]
		 $('#carsTable tbody').on('click', 'tr', function () {
        		var data = carTable.row( this ).data();
        		alert( 'You clicked on '+data[0]+'\'s row' );
  		  } );

Open in new window

Who is Participating?
HainKurtSr. System AnalystCommented:
I guess this is what you need

$('#carsTable tbody tr').on ("click", function(){

Open in new window

change that number ":eq(x)" it is 0 based... first td will be 0...

here is a demo

check console, Chrome / F12
HainKurtSr. System AnalystCommented:
can you create a simple demo or give us the link to the page

and you should use

$('#carsTable tbody tr').on ("click", function(){

Open in new window

earwig75Author Commented:
@HainKurt, I'm sorry, I have a question. I need to use 2 columns, in my row, ID and CarType.
HainKurtSr. System AnalystCommented:
use this to get the 1st td

$('#carsTable tbody tr').on ("click", function(){
  var data =$(this).children(":eq(0)").text()
  alert( 'You clicked on '+data+'\'s row' );

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.