Elementals.js

Latest Version: 2.0 RC 3 14 March 2017

Using _.uSortElement with TBODY

View the Demo live here

_.uSortElement 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

_.uSortElement(_d.getElementById('sortTest'), function(a, b) {
	return _.compareString(a.data[0], b.data[0]);
});

Leveraging elementals.js' _.compareString 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

_.uSortRestore(_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

var
	sortTable = _d.getElementById('sortTable'),
	sortTest = _d.getElementById('sortTest'),
	sortControls = _.make('#sortControls.controls', {
		after : sortTable
	});
	
_.make('button', {
	type : 'button',
	content : 'Sort Name - String ASC',
	onclick : function(e) {
		_.uSortElement(sortTest, function(a,b) {
			return _.compareString(a.data[0], b.data[0]);
		});
	},
	last : sortControls
});
_.make('br', { last : sortControls });

_.make('button', {
	type : 'button',
	content : 'Sort Name - String DESC',
	onclick : function(e) {
		_.uSortElement(sortTest, function(a,b) {
			return _.compareString(b.data[0], a.data[0]);
		});
	},
	last : sortControls
});
_.make('br', { last : sortControls });

_.make('button', {
	type : 'button',
	content : 'Sort Data - Numeric ASC',
	onclick : function(e) {
		_.uSortElement(sortTest, function(a,b) {
			return _.compareNumeric(a.data[1], b.data[1]);
		});
	},
	last : sortControls
});
_.make('br', { last : sortControls });

_.make('button', {
	type : 'button',
	content : 'Sort Data - Numeric DESC',
	onclick : function(e) {
		_.uSortElement(sortTest, function(a,b) {
			return _.compareNumeric(b.data[1], a.data[1]);
		});
	},
	last : sortControls
});
_.make('br', { last : sortControls });

_.make('button', {
	type : 'button',
	content : 'Sort Data - String ASC',
	onclick : function(e) {
		_.uSortElement(sortTest, function(a,b) {
			return _.compareString(a.data[1], b.data[1]);
		});
	},
	last : sortControls
});
_.make('br', { last : sortControls });

_.make('button', {
	type : 'button',
	content : 'Sort Data - String DESC',
	onclick : function(e) {
		_.uSortElement(sortTest, function(a,b) {
			return _.compareString(b.data[1], a.data[1]);
		});
	},
	last : sortControls
});
_.make('br', { last : sortControls });

_.make('button', {
	type : 'button',
	content : 'Original Order',
	onclick : function(e) {
		_.uSortRestore(sortTest);
	},
	last : sortControls
});

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 _.uSortElement as mentioned above, with our different sort methods and Object.data indexes.