Hallo
Ich habe eine Tabelle, die aus einem array gespeist wird. Nun will ich die daraus entstehende Tabelle filtern (mithilfe der Checkbox-Buttons). Filtern will ich dabei nach dem Feld data.model im Array. Mir fehlt momentan noch der Ansatz wie ich da vorgehen kann.
Vielen Dank für Eure Mühe!
Ich habe eine Tabelle, die aus einem array gespeist wird. Nun will ich die daraus entstehende Tabelle filtern (mithilfe der Checkbox-Buttons). Filtern will ich dabei nach dem Feld data.model im Array. Mir fehlt momentan noch der Ansatz wie ich da vorgehen kann.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=geometry"></script>
<br>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> BMW 1er
</label>
<label class="btn btn-primary">
<input type="checkbox"> BMW Active E
</label>
</label>
<label class="btn btn-primary">
<input type="checkbox"> BMW 1er Cabrio
</label>
</label>
<label class="btn btn-primary">
<input type="checkbox"> BMW X1
</label>
<label class="btn btn-primary">
<input type="checkbox"> MINI
</label>
</label>
<label class="btn btn-primary">
<input type="checkbox"> MINI Clubman
</label>
<label class="btn btn-primary">
<input type="checkbox"> MINI Coupé
</label>
<label class="btn btn-primary">
<input type="checkbox"> MINI Cabrio
</label>
</div>
<br>
</head>
<body>
<font size="1">
<br>
<table class="table table-condensed" border="1" id="usertable"></table>
</font>
<script src="js/bootstrap.min.js"></script>
<div class="alert alert-success">
<a href="#" class="alert-link">Die Übersicht zu Drive-Now München lädt... Bitte einen Moment Geduld!</a>
</div>
<script type="text/javascript">
$(document).ready(function(){
function callJSON() {
setTimeout(function () {
$.getJSON('./url.php', function(data) {
$ ("#usertable").empty();
var cars = data.rec.vehicles.vehicles;
//cars.sort(function(el1,el2){ return el1.model == el2.model ? 0 : (el1.model < el2.model ? -1 : 1); });
cars.sort(function(el1, el2) {
if(el1.model== el2.model) {
if(el1.fuelState == el2.fuelState) {
return 0;
} else if(el1.fuelState < el2.fuelState) {
return -1;
} else {
return 1;
}
} else if(el1.model < el2.model) {
return -1;
} else {
return 1;
}
});
$.each(cars, function(key, data){
var laenge=cars.length;
var vint=data.vin;
var positionA= new google.maps.LatLng(data.position.latitude, data.position.longitude);
var posiitonB= new google.maps.LatLng(48.1351253, 11.5819806);
var entfernung= google.maps.geometry.spherical.computeDistanceBetween (positionA, posiitonB);
var entfernung1=(entfernung/1000);
var entfernung2=entfernung1.toFixed(2);
var entfernung3=entfernung2+" Km";
console.log(entfernung2);
console.log(positionA);
console.log(posiitonB);
var coopers="";
var tanken="";
var drive="MAN";
var fuelfarbe="#01DF3A";
var prozent="%";
var kosten=" 31 Cent/Min "
var tanksymbol="glyphicon-tint";
var farbe="success";
var flugbadge="";
var mode="&dirflg=w";
var kraftstoff="BENZIN";
var ortbadge="glyphicon-map-marker";
var entfernungsbadge="glyphicon-resize-horizontal";
var krafts=" ("+data.fuelState+"%)";
var strasse=data.address;
var v=vint.substring(3,7);
var pdf=vint.substring(10,17);
var pdf1=pdf+".pdf";
console.log(pdf);
if(data.fuelType=="DDE"){kraftstoff="DIESEL";}
if(v=="SX31"){coopers=" S";}
if(v=="SW71"){coopers=" SD";}
if(data.model=="BMW ActiveE "){tanksymbol="glyphicon-flash"; kraftstoff="STROM";}
if(data.model=="BMW X1 "){kosten=" 34 Cent/Min ";}
if(data.auto=="Y"){drive="AUT";}
if((48.347910654607695 < data.position.latitude && data.position.latitude < 48.35988839686733)&&(11.781678199768066 < data.position.longitude && data.position.longitude < 11.792492866516113)){flugbadge="<span class='badge'>+12€</span>"; ortbadge="glyphicon-plane";}
if(data.fuelState<=25){tanken="20 Freiminuten für Vollbetankung"; farbe="warning";}
if(data.position.latitude=="0"){entfernung3="NaN"; strasse="Nicht lokalisierbar"; farbe="active";}
$('#usertable').append(
function() {
return "<tr class="+farbe+">"+
"<td>"+data.model+coopers+"</td>"+
"<td><span class='glyphicon glyphicon-user'></span> "+data.carName+"</td>"+
//"<td><span class='glyphicon glyphicon-time'></span> "+dur+"</td>"+
"<td>"+drive+"</td>"+
"<td><span class='glyphicon "+tanksymbol+"'></span>" +kraftstoff+krafts+"</td>"+
"<td>"+data.licensePlate+"</td>"+
"<td><span class='glyphicon "+ortbadge+"'></span> "+strasse+"</td>"+
"<td><span class='glyphicon "+entfernungsbadge+"'></span> "+entfernung3+"</td>"+
"<td><span class='glyphicon glyphicon-euro'></span>"+kosten+flugbadge+"</td>"+
"<td>"+laenge+"</td>"+
"<td><a href='https://de.drive-now.com/php/metropolis/vehicle_details?vin="+ data.vin +"'target='_blank'><button class='btn btn-success btn-xs' type='button'>Reservieren</button></a></td>"+
"<td><a href='http://maps.google.de/maps?saddr="+ posiitonB +"&daddr="+data.address+mode+"'target='_blank'><button class='btn btn-danger btn-xs' type='button'>Route</button></a></td>"+
"<td><a href='http://www.bmwarchiv.de/vin/"+pdf1+"'target='_blank'><button class='btn btn-danger btn-xs' type='button'>Route</button></a></td>"+
//"<td><img src='"+data.model+"1.png'/></td>"+
"<tr>";
}
);
})
}).always(callJSON);
}, 2000);
}
$(callJSON);
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44913908-2', 'voltdrive.de');
ga('send', 'pageview');
</script>
</body>
</html>Vielen Dank für Eure Mühe!
