stupid-table-plugin
Version:
Stupidly simple jquery table sorting plugin
184 lines (167 loc) • 4.87 kB
HTML
<html>
<head>
<title>Stupid jQuery table sort (complex example)</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../stupidtable.js?dev"></script>
<script>
$(function(){
// Helper function to convert a string of the form "Mar 15, 1987" into
// a Date object.
var date_from_string = function(str){
var months = ["jan","feb","mar","apr","may","jun","jul",
"aug","sep","oct","nov","dec"];
var pattern = "^([a-zA-Z]{3})\\s*(\\d{2}),\\s*(\\d{4})$";
var re = new RegExp(pattern);
var DateParts = re.exec(str).slice(1);
var Year = DateParts[2];
var Month = $.inArray(DateParts[0].toLowerCase(), months);
var Day = DateParts[1];
return new Date(Year, Month, Day);
}
var moveBlanks = function(a, b) {
if ( a < b ){
if (a == "")
return 1;
else
return -1;
}
if ( a > b ){
if (b == "")
return -1;
else
return 1;
}
return 0;
};
var moveBlanksDesc = function(a, b) {
// Blanks are by definition the smallest value, so we don't have to
// worry about them here
if ( a < b )
return 1;
if ( a > b )
return -1;
return 0;
};
var table = $("table").stupidtable({
"date":function(a,b){
// Get these into date objects for comparison.
aDate = date_from_string(a);
bDate = date_from_string(b);
return aDate - bDate;
},
"moveBlanks": moveBlanks,
"moveBlanksDesc": moveBlanksDesc,
});
table.on("beforetablesort", function (event, data) {
// data.column - the index of the column sorted after a click
// data.direction - the sorting direction (either asc or desc)
$("#msg").text("Sorting index " + data.column)
});
table.on("aftertablesort", function (event, data) {
var th = $(this).find("th");
th.find(".arrow").remove();
var dir = $.fn.stupidtable.dir;
var arrow = data.direction === dir.ASC ? "↑" : "↓";
th.eq(data.column).append('<span class="arrow">' + arrow +'</span>');
});
$("tr").slice(1).click(function(){
$(".awesome").removeClass("awesome");
$(this).addClass("awesome");
});
});
</script>
<style type="text/css">
table {
border-collapse: collapse;
}
th, td {
padding: 5px 10px;
border: 1px solid #999;
}
th {
background-color: #eee;
}
th[data-sort]{
cursor:pointer;
}
tr.awesome{
color: red;
}
#msg {
color: green;
}
</style>
</head>
<body>
<h1>Stupid jQuery table sort! (complex example)</h1>
<p>This example showcases several of the more advanced features, including specifying sort values, custom data types and callbacks. View the source of this file or see the <a href="http://joequery.github.com/Stupid-Table-Plugin/">documentation</a> for more details on how to implement them.</p>
<p id="msg"> </p>
<table>
<thead>
<tr>
<th data-sort="int">int</th>
<th data-sort="int">int</th>
<th data-sort="float" data-sort-default="desc">float</th>
<th data-sort="moveBlanks" data-sort-desc="moveBlanksDesc">string</th>
<th data-sort="string-ins">case</th>
<th>Can't sort me!</th>
<th data-sort="date">date</th>
<th data-sort="int">Letter frequency</th>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>15</td>
<td>-.18</td>
<td>banana</td>
<td>Homer</td>
<td>arbitrary</td>
<td>Sep 15, 2002</td>
<td data-sort-value="0">E</td>
</tr>
<tr class="awesome">
<td>95</td>
<td>95</td>
<td>36</td>
<td></td>
<td>purple</td>
<td>pointless</td>
<td>Aug 07, 2004</td>
<td data-sort-value="1">T</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>-152.5</td>
<td></td>
<td>is</td>
<td>silly</td>
<td>Mar 15, 1986</td>
<td data-sort-value="2">A</td>
</tr>
<tr>
<td>-53</td>
<td>-53</td>
<td>88.5</td>
<td>hello</td>
<td>a</td>
<td>eccentric</td>
<td>Feb 27, 2086</td>
<td data-sort-value="3">O</td>
</tr>
<tr>
<td>195</td>
<td>195</td>
<td>-858</td>
<td>orange</td>
<td>fruit</td>
<td>garbage</td>
<td>Mar 15, 1986</td>
<td data-sort-value="4">I</td>
</tr>
</tbody>
</table>
</body>
</html>