javascript - 排序表中的数字

Question

我曾尝试创建一个表格，该表格能够通过单击表格标题对数据进行升序或降序排序。

但是，数据编号未根据 1、3、9、10 而不是 1、10、11、12 正确排序。有没有办法对数字进行排序？

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>

标签： javascripthtml

Answer 1

您必须添加选项以对localCompare调用进行数字排序

// --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>