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: www.myshop.com/cars.html?ID=77&CarType=Chevy

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?

	$(document).ready(function(){
		searchCars();
	});
	function searchCars() {
		 $('#carsTable').DataTable().destroy();

		// 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',
			text:'Utility',
			titleAttr: 'Utility',
			autoClose: true,
			className: 'btn btn-primary btn-xs',
			buttons: [
			'colvis',
			'copy',
			'excel',
			'pdf',
			'print'
			]
			}
			],
			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' );
  		  } );
		}
</script>

Open in new window

earwig75Asked:
Who is Participating?
 
HainKurtConnect With a Mentor Sr. System AnalystCommented:
I guess this is what you need

$('#carsTable tbody tr').on ("click", function(){
  console.log($(this).children(":eq(2)").text());
})

Open in new window


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

here is a demo
http://jsfiddle.net/6q59tg21/

check console, Chrome / F12
0
 
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(){
  alert($(this));
})

Open in new window

0
 
earwig75Author Commented:
@HainKurt, I'm sorry, I have a question. I need to use 2 columns, in my row, ID and CarType.
0
 
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

0
All Courses

From novice to tech pro — start learning today.