Widget:Hotspots: Unterschied zwischen den Versionen
| Zeile 58: | Zeile 58: | ||
// define nowrap for specific columns | // define nowrap for specific columns | ||
// "columnDefs": [ | // "columnDefs": [ | ||
| − | + | { className: "dt-nowrap", "targets": [ 3,4,7,8 ] }, | |
// { width : 100, "targets": [ 7,8,9 ] } | // { width : 100, "targets": [ 7,8,9 ] } | ||
// ], | // ], | ||
Version vom 15. September 2018, 14:31 Uhr
<script type="text/javascript" src="/hotspots/js/jquery.js"></script> <link rel="stylesheet" type="text/css" href="/hotspots/datatables/datatables.min.css"/> <script type="text/javascript" src="/hotspots/datatables/datatables.min.js"></script> <script type="text/javascript" src="https://api.main.freifunk-dresden.de/freifunk-dresden-hotspots.json.js"></script>
<thead> </thead> <tfoot> </tfoot>| Node | IP | Online Gateway Offline Tage |
Registriert | Name | Map | Firmware | Model | Ort | Kommentar |
|---|---|---|---|---|---|---|---|---|---|
<script type="text/javascript">
function getIp(node) {
var _middle = Math.floor((node / 255)) % 256; var _minor = (node % 255) + 1; return '10.200.' + _middle.toString() + '.' + _minor.toString();
}
/* If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version. Some times it could be issue with older version (or not stable) of JQuery files.
Solution use $.noConflict();
- /
$.noConflict();
$(document).ready(function() {
$('#example').DataTable( {
"processing": true, //"responsive": true, "pageLength" : 25, "lengthMenu": [[ 25, 50, 100, 200, -1 ], [25,50,100,200,"All"]], "order" : 0,'asc', scrollX: true,
// define nowrap for specific columns // "columnDefs": [ { className: "dt-nowrap", "targets": [ 3,4,7,8 ] }, // { width : 100, "targets": [ 7,8,9 ] } // ],
"data": dataSet,
// https://datatables.net/reference/option/rowCallback "rowCallback": function( row, data ) {
if ( data.id < 1000 ) { row.style.backgroundColor= (row.className=="odd") ? "#bbddbb" : "#cceecc"; //row.firstChild.style.backgroundColor = row.style.backgroundColor; }
if ( data.id > 1000 && data.id < 51000 ) { row.style.backgroundColor= (row.className=="odd") ? "#ddddee" : "#eeeeff"; //row.firstChild.style.backgroundColor = row.style.backgroundColor; }
if ( data.status.offline_since > 2 ) { //row.style.backgroundColor= (row.className=="odd") ? "#cccccc" : "#dddddd"; row.style.backgroundColor= "#cccccc"; //row.firstChild.style.backgroundColor = row.style.backgroundColor; } }, // see: https://datatables.net/manual/data/orthogonal-data
"columns": [
{ "data": "id" },
{ "data": "id", //use "id" as input data for renderer
"render" : function (data, type, row) {
// If display or filter data is requested, format the date
if ( type === 'display' || type === 'filter' ) {
var ip = getIp(data);
return '<a href="http://' + ip + '/">' + ip + '</a>';
}
//else return id that is used when sorting this column
return data;
}
},
{ "data": "status",
"render" : function (data, type, row) {
if ( type === 'display' || type === 'filter' ) {
var img_o = data.online ? 'yes.png' : 'no.png';
var img_g = data.gateway ? 'yes.png' : 'no.png';
return ''
+ '
'
+ '[' + data.offline_since + ']';
}
return data.offline_since;
}
},
{ "data": "status.registered",
"render" : function (data, type, row) {
if ( type === 'display' || type === 'filter' ) {
var t = new Date(data*1000);
var day = ( '0' + t.getDate() ).slice(-2);
var month = ( '0' + t.getMonth() ).slice(-2);
var h = ( '0' + t.getHours() ).slice(-2);
var m = ( '0' + t.getMinutes() ).slice(-2);
return day + '.' + month + '.' + t.getFullYear()
+ ' ' + h + ':' + m;
}
return data;
}
},
{ "data": "name" },
{ "data": "position",
"render" : function (data, type, row) {
if ( type === 'display' || type === 'filter' ) {
return '<a href="http://maps.google.de/maps?f=q&hl=de&q='
+ data.lat.toString() + ','
+ data.lon.toString() + '&ie=UTF8&z=15&iwloc=addr&om=1">Map</a>';
} return 0; } }, { "data": "firmware" }, { "data": "model" }, { "data": "location" }, { "data": "note" },
] } ); } );
</script>
