Elementals.js

Latest Version: 3.7 Final 20 December 2018

Using _.USort.element with TBODY

View the Demo live here

_.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 and TD Elements for that row.
  • Object.data -- an Array containing the text contents for each of the row's TH and TD 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.

Libraries

eFlipper.js

Image and Element animated carousel/slideshow.

eProgress.js

An unobtrusive lightweight progress bar

eSmooth.js

On-page smooth scrolling links.

Downloads

Advertisement