1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - IP address parsers</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<!-- 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>
<script src="../js/parsers/parser-network.js"></script>
<script id="js">$(function() {
$('table').tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra'],
sortList: [[2, 0]],
headers: {
1: { sorter: 'MAC' },
3: { sorter: 'ipv6Address' }
}
});
});</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>
</p>
<ul>
<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>
<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>
<li>IPv6 addresses are stored in the cache in their canonical decimal form, for faster & easier numerical sorting.</li>
<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:
<pre class="prettyprint lang-javascript">$(function() {
$('table').tablesorter({
headers: {
1: { sorter: 'MAC' },
// 2: { sorter: 'ipAddress' }, this parser is auto-detected
3: { sorter: 'ipv6Address' }
}
});
});</pre>
</li>
<li>These parsers may also be used with the original tablesorter plugin.</li>
</ul>
<h1>Demo</h1>
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
<br>
<div id="demo">
<table>
<thead>
<tr>
<th>Name</th>
<th>MAC</th>
<th>IPv4</th>
<th>IPv6</th>
</tr>
</thead>
<tbody>
<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>
</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>
<!-- load mac, ipv4 and ipv6 parsers -->
<script src="../js/parsers/parser-network.js"></script>
<script>
$(function() {
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra'],
sortList: [[1, 0]],
headers: {
1: { sorter: 'MAC' },
// 2: { sorter: 'ipAddress' }, this parser is auto-detected (alias for 'ipv4Address')
3: { sorter: 'ipv6Address' } // this parser is also auto-detected
}
});
});
</script></pre>
</div>
</div>
<script>
$(function() {
// add parsed values to columns [0,1]
addParsedValues($('table'), [1,2,3]);
});
</script>
</body></html>
|
