Jquery table sorting Alphabetically, not sorting numerically-CodePudding

I've created a simple Jquery table. It sorting Alphabetically, but not sorting numerically / numbering. I Don't know where the problem is. Lool at my code.

<!-- Font Awesome 4.7.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
.ceo th,
.ceo td {
  padding: 10px 30px;
}
.ceo th {
  background: #333;
  color: white;
}
.ceo th::after {
  content: "\f0dc";
  font-family: FontAwesome;
  font-size: 12px;
  color: #ccc;
  margin-left: 8px;
}
.ceo th.asc:after {
  display: inline-block;
  content: " \f0de";
  font-family: FontAwesome;
  color: #fff;
}
.ceo th.desc:after {
  display: inline-block;
  content: " \f0dd";
  font-family: FontAwesome;
  color: #fff;
}
.ceo td {
  background: #ccc;
}
</style>

<table >
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Marissa Mayer</td>
            <td>3.3</td>
        </tr>
        <tr>
            <td>Larry Page</td>
            <td>-2</td>
        </tr>
     <tr>
            <td>Oli Page</td>
            <td>-13</td>
        </tr>
     <tr>
            <td>Uniors</td>
            <td>-14</td>
        </tr>
      <tr>
            <td>Brown</td>
            <td>22</td>
        </tr>
        <tr>
            <td>Mark Zuckerberg</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

<script>
$(function () {
  $('table').
  on('click', 'th', function () {
    var index = $(this).index(),
    rows = [],
    thClass = $(this).hasClass('asc') ? 'desc' : 'asc';

    $('.ceo th').removeClass('asc desc');
    $(this).addClass(thClass);

    $('.ceo tbody tr').each(function (index, row) {
      rows.push($(row).detach());
    });

    rows.sort(function (a, b) {
      var aValue = $(a).find('td').eq(index).text(),
      bValue = $(b).find('td').eq(index).text();

      return aValue > bValue ?
      1 :
      aValue < bValue ?
      -1 :
      0;
    });

    if ($(this).hasClass('desc')) {
      rows.reverse();
    }

    $.each(rows, function (index, row) {
      $('.ceo tbody').append(row);
    });
  });
});
</script>

` I exactly don't know where the problem is. First column working good, but second one is not sorting correctly. Somebody please help me why It's not sorting.....

Jquery table not sorting numerically.

CodePudding user response：

The issue is that you are taking the values as string.

var aValue = $(a).find('td').eq(index).text(),
      bValue = $(b).find('td').eq(index).text();

instead you need to parse it to a number before doing the comparison.

var aValue = $(a).find('td').eq(index).text(),
      bValue = $(b).find('td').eq(index).text(); 

// something like this to parse it out to number
if(!isNaN( aValue)) aValue =  aValue;
if(!isNaN( bValue)) bValue =  bValue;