183 lines
4.7 KiB
HTML
183 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Stupid jQuery table sort (complex example)</title>
|
|
<script src="http://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">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>
|