CODEWITHSUNDEEP
javascripthtml
Ichida
Ichida

Reputation: 349

Sorting Number in Table

I had try to create a table that able to sort the data ascending nor descending by clicking on the table header.

However the data number is not sorting correctly based on 1,3,9,10 instead of 1,10,11,12. Is there any way to sort the number?

function sortTable(table, col, reverse) {
  var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
    tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
    i;
  reverse = -((+reverse) || -1);
  tr = tr.sort(function (a, b) { // sort rows
    return reverse // `-1 *` if want opposite order
      * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
        .localeCompare(b.cells[col].textContent.trim())
         );
  });
  for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}

function makeSortable(table) {
  var th = table.tHead, i;
  th && (th = th.rows[0]) && (th = th.cells);
  if (th) i = th.length;
  else return; // if no `<thead>` then do nothing
  while (--i >= 0) (function (i) {
    var dir = 1;
    th[i].addEventListener('click', function () {
      sortTable(table, i, (dir = 1 - dir))
      });
  }(i));
}

function makeAllSortable(parent) {
  parent = parent || document.body;
  var t = parent.getElementsByTagName('table'), i = t.length;
  while (--i >= 0) makeSortable(t[i]);
}
window.onload = function () {makeAllSortable();};
<table class="table table-striped table-bordered table-hover" id="Tabla">
	<thead>
		<tr style="cursor:pointer">
			<th>Fruit<span class="glyphicon pull-right" aria-hidden="true"></span></th>
			<th>Number<span class="glyphicon pull-right" aria-hidden="true"></span></th>
		</tr>
	</thead>
	
	<tr>
		<td>Apple</td>
		<td>11757.915</td>
	</tr>
	
	<tr>
		<td>Orange</td>
		<td>36407.996</td>
	</tr>
	
	<tr>
		<td>Watermelon</td>
		<td>9115.118</td>
	</tr>
	
</table>

Upvotes: 1

Views: 119

Answers (1)

yunzen
yunzen

Reputation: 33439

You must add the options to sort numerically to the localCompare call

// --8<-------
.localeCompare(b.cells[col].textContent.trim(), undefined, {numeric: true})
// ------->8--


function sortTable(table, col, reverse) {
  var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
    tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
    i;
  reverse = -((+reverse) || -1);
  tr = tr.sort(function(a, b) { // sort rows
    return reverse // `-1 *` if want opposite order
      *
      (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
        .localeCompare(b.cells[col].textContent.trim(), undefined, {numeric: true})
      );
  });
  for (i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}

function makeSortable(table) {
  var th = table.tHead,
    i;
  th && (th = th.rows[0]) && (th = th.cells);
  if (th) i = th.length;
  else return; // if no `<thead>` then do nothing
  while (--i >= 0)(function(i) {
    var dir = 1;
    th[i].addEventListener('click', function() {
      sortTable(table, i, (dir = 1 - dir))
    });
  }(i));
}

function makeAllSortable(parent) {
  parent = parent || document.body;
  var t = parent.getElementsByTagName('table'),
    i = t.length;
  while (--i >= 0) makeSortable(t[i]);
}
window.onload = function() {
  makeAllSortable();
};
<table class="table table-striped table-bordered table-hover" id="Tabla">
  <thead>
    <tr style="cursor:pointer">
      <th>Fruit<span class="glyphicon pull-right" aria-hidden="true"></span></th>
      <th>Number<span class="glyphicon pull-right" aria-hidden="true" data-sort="numerically"></span></th>
    </tr>
  </thead>

  <tr>
    <td>Apple</td>
    <td>11757.915</td>
  </tr>

  <tr>
    <td>Orange</td>
    <td>36407.996</td>
  </tr>

  <tr>
    <td>Watermelon</td>
    <td>9115.118</td>
  </tr>

</table>

Upvotes: 2

Related Questions