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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - File Type Parser</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>
<style id="css">tr.group-header td {
background: #eee;
}
.group-name {
text-transform: uppercase;
font-weight: bold;
}
.group-count {
color: #999;
}
.group-hidden {
display: none;
}
.group-header, .group-header td {
user-select: none;
-moz-user-select: none;
}
/* collapsed arrow */
tr.group-header td i {
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid #888;
border-right: 4px solid #888;
border-left: 4px solid transparent;
margin-right: 7px;
user-select: none;
-moz-user-select: none;
}
tr.group-header.collapsed td i {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #888;
border-right: 0;
margin-right: 10px;
}</style>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<!-- grouping widget -->
<script src="../js/parsers/parser-file-type.js"></script>
<script src="../js/widgets/widget-grouping.js"></script>
<script id="js">$(function() {
// basic list from http://en.wikipedia.org/wiki/List_of_file_formats
// there is no need to include this unless you plan on replacing the
// default settings completely
$.tablesorter.fileTypes = {
// divides filetype extensions in the equivalent list below
separator : '|',
equivalents : {
"3D Image" : "3dm|3ds|dwg|max|obj",
"Audio" : "aif|aac|ape|flac|la|m4a|mid|midi|mp2|mp3|ogg|ra|raw|rm|wav|wma",
"Compressed" : "7z|bin|cab|cbr|gz|gzip|iso|lha|lz|rar|tar|tgz|zip|zipx|zoo",
"Database" : "csv|dat|db|dbf|json|ldb|mdb|myd|pdb|sql|tsv|wdb|wmdb|xlr|xls|xlsx|xml",
"Development" : "asm|c|class|cls|cpp|cc|cs|cxx|cbp|cs|dba|fla|h|java|lua|pl|py|pyc|pyo|sh|sln|r|rb|vb",
"Document" : "doc|docx|odt|ott|pages|pdf|rtf|tex|wpd|wps|wrd|wri",
"Executable" : "apk|app|com|exe|gadget|lnk|msi",
"Fonts" : "eot|fnt|fon|otf|ttf|woff",
"Icons" : "ani|cur|icns|ico",
"Images" : "bmp|gif|jpg|jpeg|jpe|jp2|pic|png|psd|tga|tif|tiff|wmf|webp",
"Presentation" : "pps|ppt",
"Published" : "chp|epub|lit|pub|ppp|fm|mobi",
"Script" : "as|bat|cgi|cmd|jar|js|lua|scpt|scptd|sh|vbs|vb|wsf",
"Styles" : "css|less|sass",
"Text" : "info|log|md|markdown|nfo|tex|text|txt",
"Vectors" : "awg|ai|eps|cdr|ps|svg",
"Video" : "asf|avi|flv|m4v|mkv|mov|mp4|mpe|mpeg|mpg|ogg|rm|rv|swf|vob|wmv",
"Web" : "asp|aspx|cer|cfm|htm|html|php|url|xhtml"
}
};
// To add a custom equivalent, define:
// $.tablesorter.fileTypes.equivalents['xx'] = "A|B|C";
// This demo uses the group widget to organize the file type equivalents
$("table").tablesorter({
theme: 'blue',
widgets : [ 'group', 'zebra', 'columns' ],
widgetOptions: {
group_separator : /[-.]/
}
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>File Type Parser</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<ul>
<li>In <span class="version">v2.24.4</span>, added a "file-extension" parser.</li>
<li>If this parser finds the file type extension within the equivalents list, it will add the equivalents group name to the beginning of the file so that during sorting, those file names will sort by the group they are in.</li>
<li>Please look in the javascript code section below for a full list of default equivalents. This list is by no means extensive, but it can be easily modified or extended as needed.</li>
<li>To add a new group to the equivalents list, just define a new group, <em>before initializing tablesorter</em>, as follows:
<pre class="prettyprint lang-javascript">$.tablesorter.fileTypes.equivalents['xx'] = "A|B|C"</pre>
</li>
<li>But lets say your table is primarily being used to sort font file names, but you notice "svg" is listed under "vectors" (graphics) so you want to modify the equivalents list. Do it as follows:
<pre class="prettyprint lang-javascript">$.tablesorter.fileTypes.equivalents["Vectors"] = "awg|ai|eps|cdr"; // redefine vectors without "svg"
$.tablesorter.fileTypes.equivalents["Fonts"] += '|svg'; // just add it to the end (but first include the vertical bar = shift+\; above the enter key)!</pre>
</li>
<li>This parser only looks to see if an extension exists within the equivalents list, so any separator can be used (spaces, commas or vertical bars).</li>
</ul>
<h1>Demo</h1>
<div id="demo">
<button type="button">Switch</button> (switch media column between "group-separator-1" & "group-separator-2")
<table class="tablesorter">
<thead>
<tr>
<th class="sorter-filetype group-separator">Desktop Files</th>
<th class="sorter-filetype group-separator-1">Tablesorter Files</th>
<th class="sorter-file-extension group-separator-1">Extensions</th>
<th id="media" class="group-separator-2">Media</th>
<th class="sorter-filetype group-separator-1">Media Files</th>
</tr>
</thead>
<tbody>
<tr><td>github.url</td><td>package.json</td><td>readme.md</td><td>Music Disc #1 - Green Day - Boulevard of Broken Dreams</td><td>Muse - Supermassive Black Hole.mp3</td></tr>
<tr><td>tablesorter.zip</td><td>readme.md</td><td>license.md</td><td>Music Disc #1 - Green Day - Holiday</td><td>Gorillaz - Feel Good Inc.mp3</td></tr>
<tr><td>learn-git.pdf</td><td>index.html</td><td>contributions.md</td><td>Music Disc #1 - M83 - Midnight City</td><td>M83 - Midnight City.mp4</td></tr>
<tr><td>pancake-cat.jpg</td><td>jquery.tablesorter.js</td><td>logo.png</td><td>Music Disc #1 - Bob Marley - Everything is Gonna Be Alright</td><td>Radiohead - Creep.ogg</td></tr>
<tr><td>to-do-list.txt</td><td>theme.blue.css</td><td>emote.png</td><td>Music Disc #1 - Bob Marley - Jamming</td><td>Ellie Goulding - Lights.flv</td></tr>
<tr><td>css-tips.docx</td><td>theme.less</td><td>script.js</td><td>Music Disc #1 - Bob Marley - Oh, Baby I Love Your Way</td><td>Imagine Dragons - Radioactive.avi</td></tr>
<tr><td>frisbee-cat.png</td><td>black-asc.gif</td><td>symbols.png</td><td>Music Disc #1 - Bob Marley - Red Red Wine</td><td>Muse - Supermassive Black Hole.avi</td></tr>
<tr><td>Diablo.lnk</td><td>green-unsorted.psd</td><td>jquery.js</td><td>Music Disc #1 - Bob Marley - No Woman No Cry</td><td>Alex Clare - Too Close.wma</td></tr>
<tr><td>Warcraft.lnk</td><td>jquery.tablesorter.widgets.js</td><td>jquery-ui.css</td><td>Music Disc #2 - Sublime - Santeria</td><td>The XX - Intro.mp3</td></tr>
<tr><td>google.url</td><td>glyphicons-halflings.png</td><td>tooltip.js</td><td>Music Disc #2 - Sublime - What I Got</td><td>AWOLNATION - Sail.wmv</td></tr>
<tr><td>swimming-cat.gif</td><td>component.json</td><td>style.css</td><td>Music Disc #2 - Massive Attack - Teardrop</td><td>Of Monsters and Men - Little Talks.m4a</td></tr>
<tr><td>photo-album.zip</td><td>themes.html</td><td>jquery-ui.js</td><td>Music Disc #2 - Massive Attack - Dissolved Girl</td><td>Nina Simone - Feeling Good.flac</td></tr>
</tbody>
</table>
</div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
<script>
/* DEMO ONLY CODE */
$(function() {
$('button').click(function() {
$('#media').toggleClass('group-separator-1 group-separator-2');
$('table').trigger('sorton', [ [[3,0]] ]);
});
});
</script>
<div class="next-up">
<hr />
Next up: <a href="example-option-sort-force.html">Force a default sorting order ››</a>
</div>
</div>
</body>
</html>
|
