2013-10-17 23:36:46 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2016-01-10 22:24:57 +00:00
< title > jQuery tablesorter 2.0 - IP address parsers< / title >
2013-10-17 23:36:46 +00:00
<!-- jQuery -->
2014-05-21 22:09:23 +00:00
< script src = "js/jquery-latest.min.js" > < / script >
2013-10-17 23:36:46 +00:00
<!-- Demo stuff -->
< link rel = "stylesheet" href = "css/jq.css" >
< link href = "css/prettify.css" rel = "stylesheet" >
< script src = "js/prettify.js" > < / script >
< script src = "js/docs.js" > < / script >
<!-- Tablesorter: required -->
< link rel = "stylesheet" href = "../css/theme.blue.css" >
< script src = "../js/jquery.tablesorter.js" > < / script >
2014-09-17 04:10:45 +00:00
< script src = "../js/parsers/parser-network.js" > < / script >
2013-10-17 23:36:46 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
$('table').tablesorter({
theme: 'blue',
2014-09-17 04:10:45 +00:00
widthFixed: true,
2013-10-17 23:36:46 +00:00
widgets: ['zebra'],
sortList: [[2, 0]],
headers: {
2014-09-17 04:10:45 +00:00
1: { sorter: 'MAC' },
3: { sorter: 'ipv6Address' }
2013-10-17 23:36:46 +00:00
}
});
});< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > IPv4 & IPv6 address parsers< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
< p class = "tip" >
< em > NOTE!< / em >
2016-01-10 22:24:57 +00:00
< / p >
< ul >
2018-01-10 21:56:30 +00:00
< li > < span class = "label warning" > NOTE< / span > The default "ipAddress" parser (also named "ipv4Address") is included with the original tablesorter; it was moved to the < code > parser-network.js< / code > file in < span class = "version" > v2.18.0< / span > .< br > < br > < / li >
< li > In < span class = "version" > v2.29.3< / span > , all included parsers were changed to return a text representation of the network address. The specific issue was that the parsed IPv6 numerical values were too large for javascript to properly recognize the number.< / li >
2016-01-10 22:24:57 +00:00
< li > A parser for IPv6 was added in < span class = "version" > v2.12< / span > and named "ipv6Address":
< ul >
< li > Unlike some other custom parsers, this one will auto-detect & check for a valid IPv6 address since the same address can be represented in many different ways. Some examples are shown in the demo table below.< / li >
2018-01-10 21:56:30 +00:00
< li > IPv6 addresses are stored in the cache in their canonical decimal form, for faster & easier numerical sorting.< / li >
2016-01-10 22:24:57 +00:00
< li > < a href = "../test.html" > Extensive unit tests< / a > are included with this parser.< / li >
< / ul >
< / li >
< li > If the parser doesn't auto-detect which column has IPv6 addresses, use the headers sorter option to set it:
2018-03-17 20:30:25 +00:00
< pre class = "prettyprint lang-javascript" > $(function() {
2016-01-10 22:24:57 +00:00
$('table').tablesorter({
headers: {
1: { sorter: 'MAC' },
// 2: { sorter: 'ipAddress' }, this parser is auto-detected
3: { sorter: 'ipv6Address' }
}
});
2013-10-17 23:36:46 +00:00
});< / pre >
2016-01-10 22:24:57 +00:00
< / li >
2016-12-29 17:25:48 +00:00
< li > These parsers may also be used with the original tablesorter plugin.< / li >
2016-01-10 22:24:57 +00:00
< / ul >
2013-10-17 23:36:46 +00:00
< h1 > Demo< / h1 >
< button type = "button" class = "toggleparsedvalue" > Toggle parsed values< / button >
< br >
< div id = "demo" >
< table >
< thead >
< tr >
2014-09-17 04:10:45 +00:00
< th > Name< / th >
< th > MAC< / th >
< th > IPv4< / th >
< th > IPv6< / th >
2013-10-17 23:36:46 +00:00
< / tr >
< / thead >
< tbody >
2014-09-17 04:10:45 +00:00
< tr > < td > Fred< / td > < td > 12:06:D2:8E:56:BF< / td > < td > 1.2.3.4< / td > < td > f0f0::1< / td > < / tr >
< tr > < td > Ginger< / td > < td > 546F.5903.3C9B< / td > < td > 1.1.1.1< / td > < td > f0::1< / td > < / tr >
< tr > < td > Mike< / td > < td > 3c-cf-44-cd-6e-d6< / td > < td > 2.222.33.44< / td > < td > 1:2:3:4:5::7:8< / td > < / tr >
< tr > < td > George< / td > < td > ff-68-3d-e8-b4-0d< / td > < td > 255.255.255.255< / td > < td > ::2:3:4< / td > < / tr >
< tr > < td > Harry< / td > < td > f566.6dfd.2df2< / td > < td > 251.2.33.4< / td > < td > f0f0:f::1< / td > < / tr >
< tr > < td > Frank< / td > < td > 12:69:13:D8:FA:61< / td > < td > 251.002.31.4< / td > < td > ::< / td > < / tr >
< tr > < td > Kristy< / td > < td > A031.5FED.43BC< / td > < td > 2.221.003.4< / td > < td > 0:0:0:0:0:0:0:0< / td > < / tr >
< tr > < td > Lily< / td > < td > 82-2D-FF-FA-CD-6C< / td > < td > 251.02.32.4< / td > < td > f0f0::f:1< / td > < / tr >
< tr > < td > Maria< / td > < td > 125c395f08f2< / td > < td > 1.2.3.44< / td > < td > 1:2:3:4:5:6:1.2.3.4< / td > < / tr >
2013-10-17 23:36:46 +00:00
< / tbody >
< / table >
< / div >
< h1 > Page Header< / h1 >
< div >
< pre class = "prettyprint lang-html" > < !-- tablesorter -->
< link rel=" stylesheet" href=" ../css/theme.blue.css" >
< script src=" ../js/jquery.tablesorter.js" > < /script>
2017-11-29 13:22:52 +00:00
< !-- load mac, ipv4 and ipv6 parsers -->
2014-09-17 04:10:45 +00:00
< script src=" ../js/parsers/parser-network.js" > < /script>
2013-10-17 23:36:46 +00:00
< script>
$(function() {
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra'],
sortList: [[1, 0]],
headers: {
2014-09-17 04:10:45 +00:00
1: { sorter: 'MAC' },
2017-11-29 13:22:52 +00:00
// 2: { sorter: 'ipAddress' }, this parser is auto-detected (alias for 'ipv4Address')
3: { sorter: 'ipv6Address' } // this parser is also auto-detected
2013-10-17 23:36:46 +00:00
}
});
});
< /script> < / pre >
< / div >
< / div >
< script >
2018-03-17 20:30:25 +00:00
$(function() {
2013-10-17 23:36:46 +00:00
// add parsed values to columns [0,1]
2014-09-17 04:10:45 +00:00
addParsedValues($('table'), [1,2,3]);
2013-10-17 23:36:46 +00:00
});
< / script >
< / body > < / html >
