Speed up development with full-stack environments for every branch.

Learn More

How to add client-side filtering and rendering using jQuery [filter.js]

1852 Runs 5140 Views 1854 Copies
Saved

Saved

dipesh.parmar 55

dipesh.parmar
published 4 years ago

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link href="assets/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/blitzer/jquery-ui.css" media="screen" rel="stylesheet" type="text/css">
	<link href="assets/css/stream.css" media="screen" rel="stylesheet" type="text/css">
	<script src="assets/js/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
	<script src="vendors/mustache.js" type="text/javascript"></script>
	<script src="filter.js" type="text/javascript"></script>
	<script src="data/top_movies_data.js" type="text/javascript"></script>
	<script src="assets/js/stream.js" type="text/javascript"></script>
	<title>How to add client-side filtering and rendering using jQuery</title>
</head>
<body>
<div class="container">
	<h1 class="title">Filter</h1>
	<div class="sidebar col-span-3">
		
		<div class="row">
			<!--
				HTML code that display the number of 
				record found in search
			-->
			<h4 class="col-span-6"> Movies (<span id="total_movies">250</span>)</h4>
			<!--
				HTML code that display progress bar
				showing data loading.
			-->
			<div class="col-span-6 progress">
				<div class="progress-bar" id="stream_progress" style="width: 0%">0 %</div>
			</div>
		</div>
		
		<div>
			<!--
				search input box
			-->
			<input type="text" id="searchbox" placeholder="Search...">
			<span class="glyphicon glyphicon-search search-icon"></span>
		</div>
		
		<!--
			HTML code for search
		-->	
		<div class="criteria" id="rating_criteria">
			<h4>Rating</h4>
			<span id="rating_range_label" class="slider-label">8 - 10</span>
			<div id="rating_slider" class="slider"></div>
			<input type="hidden" id="rating_filter" value="8-10"/>
		</div>
		
		<div class="criteria" id="runtime_criteria">
			<h4>Runtime</h4>
			<span id="runtime_range_label" class="slider-label">50 mins - 250 mins</span>
			<div id="runtime_slider" class="slider"></div>
			<input type="hidden" id="runtime_filter" value="50-250">
		</div>

		<div class="criteria" id="year_criteria">
			<h4>Year</h4>
			<select id="year_filter" class="col-span-8">
				<option value="1920-2020">All (1920 - 2020)</option>
				<option value="1920-1930">1920 - 1930</option>
				<option value="1931-1940">1931 - 1940</option>
				<option value="1941-1950">1941 - 1950</option>
				<option value="1951-1960">1951 - 1960</option>
				<option value="1961-1970">1961 - 1970</option>
				<option value="1971-1980">1971 - 1980</option>
				<option value="1981-1990">1981 - 1990</option>
				<option value="1991-2000">1991 - 2000</option>
				<option value="2001-2010">2001 - 2010</option>
				<option value="2011-2020">2011 - 2020</option>
			</select>
		</div>
		
		<div class="criteria" id="genre_criteria">
			<h4>Genre</h4>
			<div class="checkbox">
				<label>
					<input type="checkbox" value='All' id="all_genre"> All
				</label>
			</div>
		</div>
	</div>
	
	<!--
		movie data display container
	-->
	<div class="movies content col-span-9" id="movies"></div>

<!--
	defining template structure for displaying
	movies data.
	using Mustache templating plugin
-->
<script id="template" type="text/html">
	<div class="col-span-4 movie">
		<div class="thumbnail">
			<span class="label label-success rating">{{rating}}
				<i class="glyphicon glyphicon-star"></i>
			</span>
			<div class="caption">
				<h4>{{name}}</h4>
				<div class="outline">
					{{outline}}
					<span class="runtime">
						<i class="glyphicon glyphicon-time"></i>
						{{runtime}} mins.
					</span>
				</div>
				<div class="detail">
					<dl>
						<dt>Director</dt>
						<dd>{{director}}</dd>
						<dt>Actors</dt>
						<dd>{{stars}}</dt>
						<dt>Year</dt>
						<dd>{{year}}</dd>
					</dl>
				</div>
			</div>
		</div>
	</div>
</script>

<!--
	defining template structure for displaying
	genre checkbox.
	using Mustache templating plugin
-->
<script id="genre_template" type="text/html">
	<div class="checkbox">
		<label>
			<input type="checkbox" value="{{genre}}"> {{genre}}
		</label>
	</div>
</script>
</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).