表中的排序编号 [英] 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.

然而，数据编号没有根据 1,3,9,10 而不是 1,10,11,12 正确排序.有没有办法对数字进行排序?

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>

推荐答案

您必须将按数字排序的选项添加到 localCompare 调用

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>

这篇关于表中的排序编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！