AM送信所マップを作ってみたのjsonをTabulatorで表にしてみました。
ローカルファイルからgistのrawデータを読むとCORSのエラーが出るのでTabulatorのajaxは使わず、一旦jqueuryでデータを取得してから、Tabulatorに渡すようにしてみました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AM DX LIST</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.8.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.3/dist/js/tabulator.min.js"></script>
<script>
function init() {
$.getJSON("https://gist.githubusercontent.com/yamori813/16065bbff4473e8ec3430570fcf7da7f/raw/radio.json", null, function(data,status){
//取得成功したら実行する処理
var tableData = data.radio;
var table = new Tabulator("#example-table", {
data: tableData,
columns: [
{
title: "略称",
field: "name"
},
{
title: "会社",
field: "corporation"
},
{
title: "コールサイン",
field: "callsign"
},
{
title: "周波数",
field: "frequency"
},
{
title: "出力",
field: "power"
},
]
});
});
};
</script>
</head>
<body onload="init()">
<div id="example-table"></div>
</body>
</html>
周波数でソートできるのは便利です。複数のフィールドでソートしたい場合はctrlかshiftキーを押してクリックします。
ちょっと見やすくしてみた。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AM DX LIST</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.8.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.3/dist/js/tabulator.min.js"></script>
<script>
function customFilter(data, filterParams){
return 1;
}
function init() {
var kw = function(cell) {
return cell.getValue() / 1000;
}
$.getJSON("https://gist.githubusercontent.com/yamori813/16065bbff4473e8ec3430570fcf7da7f/raw/radio.json", null, function(data,status){
//取得成功したら実行する処理
var tableData = data.radio;
var table = new Tabulator("#example-table", {
rowClick:function(e, row){
var array = row.getData();
window.open("https://www.google.com/maps?t=k&q=" + array.latitude + "," + array.longitude);
},
data: tableData,
columns: [
{
title: "略称",
field: "name",
sorter:"string", headerSort:false
},
{
title: "会社",
field: "corporation",
sorter:"string", headerSort:false
},
{
title: "コールサイン",
field: "callsign",
sorter: function(a, b, aRow, bRow, column, dir, sorterParams){
var astr = a.charAt(3) + a.charAt(2);
var bstr = b.charAt(3) + b.charAt(2);
return astr > bstr;
}
},
{
title: "周波数(kHz)",
field: "frequency",
align: "right"
},
{
title: "出力(kW)",
field: "power",
formatter: kw,
align: "right"
},
]
});
});
};
</script>
</head>
<body onload="init()">
<div id="example-table"></div>
</body>
</html>
コールサインのソートはちょっと凝ってみました。:)
クリックするとgoogle mapの航空写真が開きます。日本全国オンラインアンテナめぐりができます。
HTMLもgistに置いてブラウザで直接見れるようにしました。