NOTE!
- This method does not use a parser nor a widget, it uses
semver.jsto allow the sorting of semantic version numbers. - But this method requires a slightly modified version of semver.js for node. All modifications are signified within the file to ease updating.
- The modified semver.js (semver-mod.js) is contained in the new "extras" subfolder. Please include it if you need this specific type of sort.
- Invalid version numbers be sorted using a basic text sort, so they will be grouped with their similar version numbers, but not sorted properly; this demo has some extra code to highlight invalid version numbers.
- In this demo, when the semver 2.0.0 compliant version column is sorted, the order column will be in sequential order.
- Semver example order, from semver.org:
1.0.0-alpha < 1.0.0-alpha.1 < 1.0.0-alpha.beta < 1.0.0-beta < 1.0.0-beta.2 < 1.0.0-beta.11 < 1.0.0-rc.1 < 1.0.0
Demo
Order |
SemVer 2.0.0 compliant versioning |
|---|---|
| 6 | 1.0.0-beta.2 |
| 8 | 1.0.0-rc.1 |
| 2 | 1.0.0-alpha.1 |
| 1 | 1.0.0-alpha |
| 10 | 1.0.0 |
| 4 | 1.0.0-alpha.beta |
| 3 | 1.0.0-alpha.2 |
| 7 | 1.0.0-beta.11 |
| 9 | 1.0.0-rc.2 |
| 5 | 1.0.0-beta |
| 11 | 1.0.0beta (invalid) |
Javascript
$(function() {
// Set up empty table with second and first columns pre-sorted
$("table").tablesorter({
theme : 'blue',
// sortList: [[1,0]],
textSorter : {
1 : function(a,b) {
if (a === b) { return 0; }
if (window.semver && semver.valid(a) !== null && semver.valid(b) !== null) {
// valid version numbers, use semver.gt() method (greater than)
return semver.gt(a, b) ? 1 : -1;
} else {
// invalid version number or semver not included -> basic text sort
return a > b ? 1 : (a < b ? -1 : 0);
}
}
},
// extra code to highlight invalid semver numbers
initialized : function(table){
var $cell,
c = table.config,
column = 1; // search second column (zero-based index)
if (window.semver) {
c.$tbodies.each(function(tbindex, tb){
$(tb).children('tr').each(function(rowindex, tr) {
$cell = $(tr).children().eq(column);
if (semver.valid( $.trim( $cell.text() ) ) === null) {
// make invalid semver numbers obvious
$cell.addClass('red').append(' (invalid)');
}
});
});
}
}
});
});
CSS
td.red { color: red; }
HTML
<table class="tablesorter">
<thead>
<tr>
<th>Order</th>
<th>SemVer 2.0.0 compliant versioning</th>
</tr>
</thead>
<tbody>
<tr><td>6</td><td>1.0.0-beta.2</td></tr>
<tr><td>8</td><td>1.0.0-rc.1</td></tr>
<tr><td>2</td><td>1.0.0-alpha.1</td></tr>
<tr><td>1</td><td>1.0.0-alpha</td></tr>
<tr><td>10</td><td>1.0.0</td></tr>
<tr><td>4</td><td>1.0.0-alpha.beta</td></tr>
<tr><td>3</td><td>1.0.0-alpha.2</td></tr>
<tr><td>7</td><td>1.0.0-beta.11</td></tr>
<tr><td>9</td><td>1.0.0-rc.2</td></tr>
<tr><td>5</td><td>1.0.0-beta</td></tr>
<tr><td>11</td><td>1.0.0beta</td></tr>
</tbody>
</table>