Using _.USort.element with TBODY
_.USort.element is one of the more powerful methods in the elementals.js library as it allows you to sort the contents of a TBODY
, UL
or OL
quickly and easily.
Let's say you had a relatively simple but well structured table like this:
HTML
<table id="sortTable">
<caption>Live Demo</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Data</th>
</tr>
</thead><tbody id="sortTest">
<tr>
<th scope="row">Jake</th>
<td>10</td>
</tr><tr>
<th scope="row">Jabert</th>
<td>11</td>
</tr><tr>
<th scope="row">Jimbo</th>
<td>15</td>
</tr><tr>
<th scope="row">Janet</th>
<td>1</td>
</tr><tr>
<th scope="row">Joker</th>
<td>5</td>
</tr><tr>
<th scope="row">Jenna</th>
<td>2</td>
</tr>
</tbody>
</table>
If you wanted to sort that by the name field, you'd first need to get hold of the TBODY, hence my placing an ID on it. You would then simply do:
JavaScript
_.USort.element(
document.getElementById('sortTest'),
function(a, b) {
return _.Compare.string(a.data[0], b.data[0]);
}
);
Leveraging elementals.js' _.Compare.string function to handle the sort. The sort for a table behaves similar to a normal Array.uSort
except that the values passed to variables 'a' and 'b' are objects containing:
-
Object.tag -- an Array of references to the actual
TH
andTD
Elements for that row. -
Object.data -- an Array containing the text contents for each of the row's
TH
andTD
Elements
So by referring to a.data[0] and b.data[0] in our comparison wrappers, we are sorting by the first column of the table. If you wanted to sort the second column, you'd use a.data[1] and b.data[1].
At any time you can restore the original order the page downloaded with by using:
JavaScript
_.USort.restore(_d.getElementById('sortTest'));
The complete demo makes use of the _.make method to create the scripting only buttons for testing out various different sorting methods. The scripting for that looks like this:
JavaScript
(function(d) {
var sortTest = d.getElementById('sortTest');
_.make('#sortControls.controls', {
content: [
[ 'button~Sort Name - String ASC', {
type : 'button',
onclick : function(e) {
_.USort.element(sortTest, function(a,b) {
return _.Compare.string(a.data[0], b.data[0]);
});
}
}], [ 'br' ],
[ 'button~Sort Name - String DESC', {
type : 'button',
onclick : function(e) {
_.USort.element(sortTest, function(a,b) {
return _.Compare.string(b.data[0], a.data[0]);
});
}
}], [ 'br' ],
[ 'button~Sort Data - Numeric ASC', {
type : 'button',
onclick : function(e) {
_.USort.element(sortTest, function(a,b) {
return _.Compare.numeric(a.data[1], b.data[1]);
});
}
}], [ 'br' ],
[ 'button~Sort Data - Numeric DESC', {
type : 'button',
onclick : function(e) {
_.USort.element(sortTest, function(a,b) {
return _.Compare.numeric(b.data[1], a.data[1]);
});
}
}], [ 'br' ],
[ 'button~Sort Data - String ASC', {
type : 'button',
onclick : function(e) {
_.USort.element(sortTest, function(a,b) {
return _.Compare.string(a.data[1], b.data[1]);
});
}
}], [ 'br' ],
[ 'button~Sort Data - String DESC', {
type : 'button',
onclick : function(e) {
_.USort.element(sortTest, function(a,b) {
return _.Compare.string(b.data[1], a.data[1]);
});
}
}], [ 'br' ],
[ 'button~Original Order', {
type : 'button',
onclick : function(e) {
_.USort.restore(sortTest);
}
}], [ 'br' ]
],
after : d.getElementById('sortTable')
});
})(document);
By making BUTTON
tags of type="button"
we don't have to trap/prevent event bubbling. (The default behavior for a BUTTON
is type="submit"
-- we don't want that!. We just give them an onclick handler that performs that same style _.USort.element as mentioned above, with our different sort methods and Object.data
indexes.