diff --git a/scripts/pi-hole/js/network.js b/scripts/pi-hole/js/network.js index a6c90f6d..ed14ca70 100644 --- a/scripts/pi-hole/js/network.js +++ b/scripts/pi-hole/js/network.js @@ -61,6 +61,111 @@ function mixColors(ratio, rgb1, rgb2) (1.0-ratio)*rgb1[2]+ratio*rgb2[2]]; } +jQuery.extend( jQuery.fn.dataTableExt.oSort, +{ + "ip-address-pre": function ( a ) + { + if (!a) { return 0 } + var i, item; + var m = a.split("."), + n = a.split(":"), + x = "", + xa = ""; + if (m.length == 4) + { + // IPV4 + for(i = 0; i < m.length; i++) + { + item = m[i]; + + if(item.length == 1) + { + x += "00" + item; + } + else if(item.length == 2) + { + x += "0" + item; + } + else + { + x += item; + } + } + } + else if (n.length > 0) + { + // IPV6 + var count = 0; + for(i = 0; i < n.length; i++) + { + item = n[i]; + + if (i > 0) + { + xa += ":"; + } + + if(item.length === 0) + { + count += 0; + } + else if(item.length == 1) + { + xa += "000" + item; + count += 4; + } + else if(item.length == 2) + { + xa += "00" + item; + count += 4; + } + else if(item.length == 3) + { + xa += "0" + item; + count += 4; + } + else + { + xa += item; + count += 4; + } + } + + // Padding the :: + n = xa.split(":"); + var paddDone = 0; + + for (i = 0; i < n.length; i++) + { + item = n[i]; + if (item.length === 0 && paddDone === 0) + { + for(var padding = 0 ; padding < (32-count) ; padding++) + { + x += "0"; + paddDone = 1; + } + } + else + { + x += item; + } + } + } + return x; + }, + + "ip-address-asc": function ( a, b ) + { + return ((a < b) ? -1 : ((a > b) ? 1 : 0)); + }, + + "ip-address-desc": function ( a, b ) + { + return ((a < b) ? 1 : ((a > b) ? -1 : 0)); + } +}); + $(document).ready(function() { tableApi = $("#network-entries").DataTable( { "rowCallback": function( row, data, index ) @@ -136,7 +241,7 @@ $(document).ready(function() { "processing": true, "order" : [[5, "desc"]], "columns": [ - {data: "ip", "width" : "10%", "render": $.fn.dataTable.render.text() }, + {data: "ip", "type": "ip-address", "width" : "10%", "render": $.fn.dataTable.render.text() }, {data: "hwaddr", "width" : "10%", "render": $.fn.dataTable.render.text() }, {data: "interface", "width" : "4%", "render": $.fn.dataTable.render.text() }, {data: "name", "width" : "15%", "render": $.fn.dataTable.render.text() },