191 lines
7.6 KiB
HTML
191 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.0 - File Type Parser</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.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' ],
|
|
widgetOptions: {
|
|
group_separator : '-' // default setting
|
|
}
|
|
});
|
|
|
|
});</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">
|
|
|
|
<p></p>
|
|
<br>
|
|
|
|
<ul>
|
|
<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>Swap</button> (swap 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 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>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>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>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>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>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>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>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>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>Music Disc #2 - Sublime - Santeria</td><td>The XX - Intro.mp3</td></tr>
|
|
<tr><td>google.url</td><td>glyphicons-halflings.png</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>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>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', [ [[2,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>
|