Sorting table with jQuery

by Eugene Trounev

HTML

<select id="filterForm" name="sortby">
  <option value="0">Alphabetically (A to Z)</option>
  <option value="0,-1">Alphabetically (Z to A)</option>
  <option value="1" selected>By call sign</option>
  <option value="2,-1">Numerically (0 to 9)</option>
  <option value="2">Numerically (9 to 0)</option>
</select>
<table id="channelList">
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>22</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>9</td>
  </tr>
</table>

SCSS

* {
  box-sizing: border-box;
}
table {
  margin: 1em;
  td {
    padding: 1em 2em;
    border: 1px solid #eee
  }
}

JavaScript

function sortFunction (c, dir) {
		c = c || 0; dir = dir || 1;
  	return function(a, b) {
    var vala = $(a).children().eq(c).text();
    var valb = $(b).children().eq(c).text();
    if(!isNaN(vala)) {
    	vala = parseInt(vala); valb = parseInt(valb);
    }
    return ((vala > valb) ? 1 : -1) * dir;
  };
}

function sortTable(sortby) {
  var table = $("#channelList");
  var rows = table.find("tr");
  rows.detach().sort(sortFunction.apply(null, sortby.split(",")));
  table.append(rows);
}

$('#filterForm').change(function() {
  var values = {};
  $.each($(this).serializeArray(), function(i, field) {
    values[field.name] = field.value;
  });
  sortTable(values.sortby);
});

sortTable("1");