Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 57
  • Last Modified:

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

0
earwig75
Asked:
earwig75
  • 3
1 Solution
 
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
 
HainKurtSr. 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
 
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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