Front End

<div class="container">
<header>
	<h1 class="page-title">
		<?php echo $post->post_title; ?>
	</h1>
</header>
	<div class="row well">
		<div class="col-sm-12">
				<select name="states" id="states" class="form-control">
					<option value="">Select State</option>
					<option value="AL">Alabama</option>
					<option value="AK">Alaska</option>
					<option value="AZ">Arizona</option>
					<option value="AR">Arkansas</option>
					<option value="CA">California</option>
					<option value="CO">Colorado</option>
					<option value="CT">Connecticut</option>
					<option value="DE">Delaware</option>
					<option value="DC">District Of Columbia</option>
					<option value="FL">Florida</option>
					<option value="GA">Georgia</option>
					<option value="HI">Hawaii</option>
					<option value="ID">Idaho</option>
					<option value="IL">Illinois</option>
					<option value="IN">Indiana</option>
					<option value="IA">Iowa</option>
					<option value="KS">Kansas</option>
					<option value="KY">Kentucky</option>
					<option value="LA">Louisiana</option>
					<option value="ME">Maine</option>
					<option value="MD">Maryland</option>
					<option value="MA">Massachusetts</option>
					<option value="MI">Michigan</option>
					<option value="MN">Minnesota</option>
					<option value="MS">Mississippi</option>
					<option value="MO">Missouri</option>
					<option value="MT">Montana</option>
					<option value="NE">Nebraska</option>
					<option value="NV">Nevada</option>
					<option value="NH">New Hampshire</option>
					<option value="NJ">New Jersey</option>
					<option value="NM">New Mexico</option>
					<option value="NY">New York</option>
					<option value="NC">North Carolina</option>
					<option value="ND">North Dakota</option>
					<option value="OH">Ohio</option>
					<option value="OK">Oklahoma</option>
					<option value="OR">Oregon</option>
					<option value="PA">Pennsylvania</option>
					<option value="RI">Rhode Island</option>
					<option value="SC">South Carolina</option>
					<option value="SD">South Dakota</option>
					<option value="TN">Tennessee</option>
					<option value="TX">Texas</option>
					<option value="UT">Utah</option>
					<option value="VT">Vermont</option>
					<option value="VA">Virginia</option>
					<option value="WA">Washington</option>
					<option value="WV">West Virginia</option>
					<option value="WI">Wisconsin</option>
					<option value="WY">Wyoming</option>
				</select>
				<span class="help-block">Select a state to filter</span>

			<a href="javascript:void" class="btn btn-primary" id="state-select">Select State</a>
	</div>
</div>
<main class="col-sm-12">
	 <br>

<section id="qb-section">
	<div id="next-tier">
			<?php
				$min_year = date(Y);
				$max_year = $min_year + 6;
				 ?>
		<div class="col-sm-6">
			<div class="col-sm-8">
				<select name="years-<?php echo $table_name ?>" id="year-select" class="form-control">
					<option value="">Select Year</option>
					<?php for($i=$min_year; $i < $max_year ; $i++) {
						?>
						<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
						<?php
					} ?>
				</select>
				<span class="help-block">Select a year to filter</span>
			</div>
			<div class="col-sm-4">
				<a id="year_search" href="javascript:void" class="btn btn-primary"><i class="fa fa-search"></i> Filter Year</a>
			</div>
		</div>

		<div class="col-sm-6">
			<div class="col-sm-8">
				<select name="styles" id="styles" class="form-control">
					<option value="">Select Style</option>
					<option value="Pro Style" selected>Pro Style</option>
					<option value="Dual Threat">Dual Threat</option>
				</select>
				<span class="help-block">Select a style to filter</span>
			</div>
			<div class="col-sm-4">
				<a id="style_search" href="#top-ten-qb" class="btn btn-primary"><i class="fa fa-search"></i> Style</a>
			</div>
		</div>
	</div>

	<table id="qb-list" class="display responsive no-wrap" cellspacing="0" width="100%">
		<thead>
			<tr>
				<th>Player</th>
				<th>Photo</th>
				<th>QB Style</th>
				<th>Class Of</th>
				<th>Ht</th>
				<th>Wt</th>
				<th>High School</th>
				<th>Location</th>
				<th>Stars</th>
				<th>Rating</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th>Player</th>
				<th>Photo</th>
				<th>QB Style</th>
				<th>Class Of</th>
				<th>Ht</th>
				<th>Wt</th>
				<th>High School</th>
				<th id="location">Location</th>
				<th>Stars</th>
				<th>Rating</th>
			</tr>
		</tfoot>

		<tbody>
<?php

   $nonce = wp_create_nonce("get_json_users_nonce");
    $link = admin_url("admin-ajax.php?action=get_json_users&nonce=$nonce");

	?>

	<?php
	$transient = get_transient( 'player_json' );
	if ( empty( $transient ) ){

		// Provide your data here

	   set_transient('player_json', $link, 60*60*12 ); // ex. sec*min*hours 60*60*12 is 12 hours
	} else {

	}
	?>


	<script>
		$(document).ready(function() {
			var table = $('#qb-list').DataTable( {
				'processing': true,
			    //'serverSide': true,
			    'ajax': '<?php echo $transient;?>',
			    //'length': 50,
			    "iDisplayLength": 10,
			    'paginate':true
			} );
			//$('#qb-section').hide();
			var style = $('#styles').val();
        table
			.columns(2)
			.search(style)
			.draw();
		});
	</script>

</tbody>
</table>

	<script>
	$('#state-select').click(function() {
	    var table = $('#qb-list').DataTable({
	    	retrieve: true
	    });
		 	var state = $('#states').val();
		 	var style = $('#styles').val();

	 	table
	 		.columns(7)
	 		.search(state,false,true,false)
	 		.draw();

	});
	</script>

	<script>
	$('#style_search').click(function() {
	    var table = $('#qb-list').DataTable({
	    	retrieve: true
	    });
	 	var style = $('#styles').val();

	 	table
	 		.columns(2)
	 		.search(style)
	 		.draw();

	} );
	</script>

	<script>
	$('#year_search').click(function() {
	    var table = $('#qb-list').DataTable({
	    	retrieve: true
	    });
	 	var year = $('#year-select').val();

	 	table
	 		.columns(3)
	 		.search(year)
	 		.draw();

	});
	</script>

</section>

</main>
</main>
</div>

 </div>
 <section class="cta">
	<aside class="container">
		<h2 class="lead pull-left"><span class="text-primary">Deluxe and premium members</span> are more likely to be
contacted by coaches and recruiters daily!<a href="<?php echo home_url(); ?>/membership-account/membership-levels/" title="Sign Up For A QB Profile Now!" class="btn btn-success btn-lg pull-right">Create Profile</a></h2>
	</aside>
</section>

	<script src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<!--     <link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<link rel="alternate" href="//cdn.datatables.net/responsive/1.0.2/css/dataTables.responsive.css"> -->
	<!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css">  -->
	<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">