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.
201 lines
6.7 KiB
201 lines
6.7 KiB
3 years ago
|
<!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>
|