Skip to content

Instantly share code, notes, and snippets.

@chetanraj

chetanraj/rangeslider.html

Created January 28, 2020 17:57
Show Gist options
  • Save chetanraj/039921e0456e19b55c7cdddfecb295c7 to your computer and use it in GitHub Desktop.
Save chetanraj/039921e0456e19b55c7cdddfecb295c7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
rangeslider.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row">
<div id="search">
<h3>Profiles - Search</h3>
</div>
<form id="searchForm" method="post">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label">Has photo</label>
<div class="col-sm-10">
<input type="radio" name="hasPhoto" value="true" required>Yes</input>
<input type="radio" name="hasPhoto" value="false" required>No</input>
</div>
</div>
<br>
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label">In contact</label>
<div class="col-sm-10">
<input type="radio" name="inContact" value="true" required>Yes</input>
<input type="radio" name="inContact" value="false" required>No</input>
</div>
</div>
<br>
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label">Favourite</label>
<div class="col-sm-10">
<input type="radio" name="isFavorite" value="true" required>Yes</input>
<input type="radio" name="isFavorite" value="false" required>No</input>
</div>
</div>
<br>
<div class="multi-range-field my-5 pb-5">
<label class="col-sm-2 control-label">Compatibility Score</label>
<div class="col-sm-10 slider">
<div class="multi-range" />
</div>
</div>
<br>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="searchBtn" class="btn btn-primary btn-lg">Search
</button>
</div>
</div>
</form>
</div>
<div class="row">
<div id="title">
<h3>Profiles - Dashboard</h3>
</div>
<table class="table table-striped" id="profilesTable" width="100%">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>job title</th>
<th>height</th>
<th>city</th>
<th>photo</th>
<th>compatibility</th>
<th>contacts</th>
<th>favourite</th>
<th>religion</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script>
$(document).ready(function () {
$("#searchForm").submit(function (e) {
e.preventDefault();
addData();
});
function loadTable(response) {
$('#profilesTable').DataTable({
"order": [],
"data": response,
"sAjaxDataProp": "",
"destroy": true,
"aoColumns": [
{ "mData": "displayName" },
{ "mData": "age" },
{ "mData": "jobTitle" },
{ "mData": "height" },
{ "mData": "cityName" },
{ "mData": "mainPhoto" },
{ "mData": "compatibilityScore" },
{ "mData": "contactsExchanged" },
{ "mData": "favourite" },
{ "mData": "religion" }
]
});
}
function addData() {
var search = {};
search["hasPhoto"] = $("input[name='hasPhoto']:checked").val();
search["minCompScore"] = 0.15;
search["maxCompScore"] = 0.95;
search["minAge"] = 25;
search["maxAge"] = 50;
search["minHeight"] = 150;
search["maxHeight"] = 180;
search["inContact"] = $("input[name='inContact']:checked").val();
search["isFavourite"] = $("input[name='isFavorite']:checked").val();
search["minDistance"] = 30;
search["maxDistance"] = 300;
$.ajax({
type: "POST",
url: "/profiles/filter",
data: JSON.stringify(search),// now data come in this function
contentType: "application/json; charset=utf-8",
dataType: 'json',
cache: false,
timeout: 600000,
success: function (data) {
console.log("Success : ", data);
loadTable(data);
},
error: function (e) {
console.log("ERROR : ", e);
}
});
}
$(".slider").each(function() {
$this = $(this);
$(".multi-range", $this).slider({
range: true,
min: 1,
max: 99,
values: [30, 60],
slide: function(event, ui) {
// find any element WITHIN scope of $this
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment