copying files to public repo
This commit is contained in:
Alan
200
example/index.html
Normal file
200
example/index.html
Normal file
@@ -0,0 +1,200 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user