JQuery Tabs

<html>
<head>
 	<link rel="stylesheet" href="css/jquery-ui.min.css">
 <script src="js/jquery-3.1.1.min.js"></script>
 <script src="js/jquery-ui.js"></script>
 <script src="js/underscore-min.js"></script>
 <script src="all.json"></script>
<script>
$(document).ready(function () {
	console.log("Loaded");
	/*$.getJSON("all.json" , function(response) {
		console.log(JSON.stringify(response));
	});*/
		//console.log(JSON.stringify(response));
		var collegeNames = _.pluck(response, 'college_name');
		var uniqueCollegeNames = _.uniq(collegeNames);
		//alert(uniqueCollegeNames);
		var collegeMap = { };
		for ( var j in uniqueCollegeNames) {
			var cname = uniqueCollegeNames[j];
			var collegeData = _.where ( response, {"college_name": cname});
			collegeMap[cname] = collegeData;
		}
		var content = "";
		var tableTabContent = "";
		var tabContent="

<ul>";
		for ( var key in collegeMap) {
			var studentRecords = collegeMap[key];
			//content+= "

<h3>" + key + "</h3>


";
			 tabContent+="

	<li><a href='#tabs-"+key+"'>"+ key + "</a></li>


"
			var tableContent = "

<h3>" + key + "</h3>


"+"

<table border='1' >

<thead>

<tr>

<th> Sno</th>


<th> Student Name</th>


<th> Department</th>


<th> Week1</th>


<th> Week2</th>

</tr>

</thead>


<tbody>";
			var sno = 1;
			for ( var i in studentRecords) {
				var obj = studentRecords[i];
				tableContent+= "

<tr>

<td>" + (sno++) + "</td>


<td>" + obj.name + "</td>


<td>" + obj.dept + "</td>


<td>" + obj.w1 + "</td>


<td>" + obj.w2 + "</td>

</tr>


";
			}
			tableContent+="</tbody>

</table>


";
			tableTabContent+="

<div id='tabs-"+key+"'>

" + tableContent+ "
</div>


";
			//$("#tabs).append(content);
		}
		tabContent+="</ul>


";
		//alert(tabContent);
		//$("#accordion").append(content);
		$("#tabs").append(tabContent).append(tableTabContent);
		//console.log(tabContent + tableTabContent);
		//$("#tabs").tabs({ collapsible: true,  heightStyle: "content", active: false});
		$("#tabs").tabs();
});
</script>
</head>
<body>
<h1> Students Report</h1>
<div id="tabs"/>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s