Question

我想使用jquery对表进行排序。表包含数字。当数字达到9时，它工作正常。但是当它变为2位数时，如＆gt; = 10，它没有正确排序。这是我的代码......
HTML

$(function () {
    $("#btnSort").bind("click", function () {
        sortTable($("#mytable"), 'des');
    });            
});
function sortTable(table, order) {
var asc = order === 'asc',
tbody = table.find('tbody');
    tbody.find('tr').sort(function (a, b) {
        if (asc) {
            return $('td:eq(0)', a).text().localeCompare($('td:eq(0)', b).text());
        } else {
            return $('td:eq(0)', b).text().localeCompare($('td:eq(0)', a).text());
        }
    }).appendTo(tbody);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table name="mytable" id="mytable">
<thead>
  <tr><th>Names</th></tr>
</thead>
<tbody>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>5</td></tr>
  <tr><td>6</td></tr>
  <tr><td>7</td></tr>
  <tr><td>8</td></tr>
  <tr><td>9</td></tr>
  <tr><td>10</td></tr>
  <tr><td>11</td></tr>
  <tr><td>12</td></tr>
  <tr><td>13</td></tr>
  <tr><td>14</td></tr>
  <tr><td>15</td></tr>
</tbody>
</table>
<button id="btnSort">click</button>

Answer 1

由于li包含nubmers，您可以使用数字排序。

function sortTable(table, order) {
  var asc = order,
    tbody = table.find('tbody');
  tbody.find('tr').sort(function(a, b) {
    if (asc) {
      return $('td:eq(0)', a).text() - $('td:eq(0)', b).text();
    } else {
      return $('td:eq(0)', b).text() - $('td:eq(0)', a).text();
    }
  }).appendTo(tbody);
}
var orderType = false;
sortTable($('#mytable'),orderType)

$('#changeOrder').click(function(){
 orderType = !orderType;
 sortTable($('#mytable'),orderType)
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='changeOrder'>changeOrder</button> 
<table name="mytable" id="mytable">
  <thead>
    <tr><th>Names</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
    <tr><td>10</td></tr>
    <tr><td>11</td></tr>
    <tr><td>12</td></tr>
    <tr><td>13</td></tr>
    <tr><td>14</td></tr>
    <tr><td>15</td></tr>
  </tbody>
</table>

Answer 2

您需要将值转换为integer。

<强>样本

var order = 'des';

$('#mytable tbody tr').sort(function(a, b) {
  a = +$(a).find('td').text();
  b = +$(b).find('td').text();
  if (order == 'des') {
    return a > b ? -1 : (a < b ? 1 : 0);
  } else {
    return a < b ? -1 : (a > b ? 1 : 0);
  }
}).appendTo('tbody');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table name="mytable" id="mytable">
  <thead>
    <tr>
      <th>Names</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
    </tr>

    <tr>
      <td>10</td>
    </tr>
    <tr>
      <td>11</td>
    </tr>
    <tr>
      <td>12</td>
    </tr>
    <tr>
      <td>13</td>
    </tr>
    <tr>
      <td>14</td>
    </tr>
    <tr>
      <td>15</td>
    </tr>

  </tbody>
</table>

表行未使用Jquery正确排序

2 个答案: