You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
200 lines
6.7 KiB
200 lines
6.7 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|
<title>Sample</title> |
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<h3>Table with sortable headings and global search</h3> |
|
<table id="sampleTableA" class="table table-striped sampleTable"> |
|
<thead> |
|
<tr> |
|
<th>Col A</th> |
|
<th>Col B</th> |
|
<th>Col C</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
</tbody> |
|
</table> |
|
<p> |
|
<button id="loadDataSimulation" class="btn btn-success">Load new data</button> |
|
</p> |
|
|
|
<h3>Simple table with column search</h3> |
|
<table id="sampleTableB" class="table table-striped sampleTable"> |
|
</table> |
|
|
|
<h3>Sort by nearest city</h3> |
|
<table id="sampleTableC" class="table table-striped sampleTable"> |
|
<thead> |
|
<tr> |
|
<th>City</th> |
|
<th>Coordinates</th> |
|
<th data-sortas="numeric">Distance</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr><td>Lindesberg</td><td>@59.5994689,15.2132325</td><td></td></tr> |
|
<tr><td>Tokyo</td><td>@35.6708364,139.7532926</td><td></td></tr> |
|
<tr><td>Sydney</td><td>@-33.8981029,151.1612396</td><td></td></tr> |
|
<tr><td>Stockholm</td><td>@59.3275993,18.0524296</td><td></td></tr> |
|
<tr><td>New York</td><td>@40.7026091,-74.1197629</td><td></td></tr> |
|
<tr><td>Rio de Janeiro</td><td>@-22.9097071,-43.1925625</td><td></td></tr> |
|
</tbody> |
|
</table> |
|
<form class="form-inline"> |
|
<button type="button" class="form-control btn btn-light" id="getNavigatorLocation">Find my location</button> |
|
or, find by Swedish zip code <input type="text" class="form-control" id="zipCode" placeholder="Zip code"> <button type="button" class="form-control btn btn-light" id="getZipCodeLocation">Find</button> |
|
</form> |
|
<style> |
|
.form-inline .form-control { |
|
margin: 5px; |
|
} |
|
</style> |
|
|
|
<h3>Case insensitive and sort value</h3> |
|
<table id="sampleTableD" class="table table-striped sampleTable"> |
|
<thead> |
|
<tr> |
|
<th>Case sensitive text values</th> |
|
<th data-sortas="case-insensitive">Case insensitive text values</th> |
|
<th data-sortas="numeric">Numeric values</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr> |
|
<td>bbb</td> |
|
<td>bbb</td> |
|
<td data-sortvalue="2">Two</td> |
|
</tr> |
|
<tr> |
|
<td>AAA</td> |
|
<td>AAA</td> |
|
<td>3</td> |
|
</tr> |
|
<tr> |
|
<td>DDD</td> |
|
<td>DDD</td> |
|
<td>4</td> |
|
</tr> |
|
<tr> |
|
<td>ccc</td> |
|
<td>ccc</td> |
|
<td>1</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/js.geotools/dist/geotools.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/js.geotools/dist/geotools-swedish-zipcodes.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script> |
|
|
|
<script src="../src/fancyTable.js"></script> |
|
<script type="text/javascript"> |
|
// Word genarator |
|
function rWord(r){var t,n="bcdfghjklmnpqrstvwxyz",a="aeiou",e=function(r){return Math.floor(Math.random()*r)},o="";r=parseInt(r,10),n=n.split(""),a=a.split("");for(t=0;t<r/2;t++){var l=n[e(n.length)],p=a[e(a.length)];o+=0===t?l.toUpperCase():l,o+=2*t<r-1?p:""}return o} |
|
|
|
$(document).ready(function() { |
|
// Generate a big table |
|
for(var n=0;n<1000;n++){ |
|
var row = $("<tr>"); |
|
$("#sampleTableA").find("thead th").each(function() { |
|
$("<td>",{ |
|
html: rWord(8), |
|
style:"padding:2px;" |
|
}).appendTo($(row)); |
|
}); |
|
row.appendTo($("#sampleTableA").find("tbody")); |
|
} |
|
// Load data simulation |
|
$("#loadDataSimulation").click(function() { |
|
$(fancyTableA).find("tbody").empty(); |
|
for(var n=0;n<1000;n++){ |
|
var row = $("<tr>"); |
|
$(fancyTableA).find("thead tr:nth-child(1) th").each(function() { |
|
$("<td>",{ |
|
html: rWord(8), |
|
style:"padding:2px;" |
|
}).appendTo($(row)); |
|
}); |
|
row.appendTo($(fancyTableA).find("tbody")); |
|
} |
|
fancyTableA.reinit(); |
|
}); |
|
// And a simple one |
|
for(var n=0;n<10;n++){ |
|
var row = $("<tr>"); |
|
for(var nn=0;nn<5;nn++){ |
|
$("<td>",{ |
|
html: rWord(8), |
|
style:"padding:2px;" |
|
}).appendTo($(row)); |
|
} |
|
$(row).find("td:last").first().html( moment(new Date(Math.floor(new Date().getTime()*Math.random()))).format('l') ); |
|
row.appendTo($("#sampleTableB")); |
|
} |
|
|
|
// And one with location data |
|
$('#getNavigatorLocation').bind("click",function(){ |
|
window.navigator.geolocation.getCurrentPosition(function(pos) { |
|
var myLocation = new geotools().position(pos.coords.latitude, pos.coords.longitude); |
|
$("#sampleTableC").find("tbody tr").each(function() { |
|
var arr = $(this).find("td").eq(1).html().match(/([\-\d\.]+)/g); |
|
if(arr.length==2){ |
|
var dest = new geotools().position(arr[0],arr[1]); |
|
$(this).find("td").eq(2).html((Math.round(myLocation.distanceTo(dest)/100)/10)+" km"); |
|
} |
|
}); |
|
$('#sampleTableC td:nth-child(3),#sampleTableC th:nth-child(3)').show(); |
|
$("#sampleTableC")[0].fancyTable.sortColumn=2; |
|
$("#sampleTableC")[0].fancyTable.sortOrder=1; |
|
$.fn.fancyTable().tableSort($("#sampleTableC")[0]); |
|
}); |
|
}); |
|
$('#getZipCodeLocation').bind("click",function(){ |
|
var myLocation = new geotools().position().fromZip($('#zipCode').val()); |
|
if(!myLocation.latitude){ |
|
return; |
|
} |
|
$("#sampleTableC").find("tbody tr").each(function() { |
|
var arr = $(this).find("td").eq(1).html().match(/([\-\d\.]+)/g); |
|
if(arr.length==2){ |
|
var dest = new geotools().position(arr[0],arr[1]); |
|
$(this).find("td").eq(2).html((Math.round(myLocation.distanceTo(dest)/100)/10)+" km"); |
|
} |
|
}); |
|
$('#sampleTableC td:nth-child(3),#sampleTableC th:nth-child(3)').show(); |
|
$("#sampleTableC")[0].fancyTable.sortColumn=2; |
|
$("#sampleTableC")[0].fancyTable.sortOrder=1; |
|
$.fn.fancyTable().tableSort($("#sampleTableC")[0]); |
|
}); |
|
$('#sampleTableC td:nth-child(2),#sampleTableC th:nth-child(2)').hide(); |
|
$('#sampleTableC td:nth-child(3),#sampleTableC th:nth-child(3)').hide(); |
|
|
|
// And make them fancy |
|
var fancyTableA = $("#sampleTableA").fancyTable({ |
|
sortColumn:0, |
|
pagination: true, |
|
perPage:5, |
|
globalSearch:true |
|
}); |
|
$("#sampleTableB").fancyTable({ |
|
pagination: true, |
|
perPage:5 |
|
}); |
|
$("#sampleTableC").fancyTable({ |
|
searchable: false |
|
}); |
|
$("#sampleTableD").fancyTable({ |
|
searchable: false |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html>
|
|
|