jQuery - Creating a simple alphanumeric .sort() [duplicate]

Question

I have a function that does a basic numeric sort, but I'd like something that can sort alphanumeric data like this:

1 Alpha
2 Beta
3 Delta
Romeo 1
Romeo2
Romeo 3

You can run the code below, or have a fiddle, right now only the Age button is working, Name and Room are not. https://jsfiddle.net/goldencarers/hfy7wega/

function clientSort(column,direction)
{
  var $divs = $(".client");

  if (direction=='asc')
  {
    var alphaDivs = $divs.sort(function (a, b) {
      return $(a).data(column) - $(b).data(column);
    });
    $(".list").html(alphaDivs);
  }
  else
  {
    if (direction=='desc')
    {
      var alphaDivs = $divs.sort(function (a, b) {
        return $(b).data(column) - $(a).data(column);
      });
      $(".list").html(alphaDivs);
    }
  }
}

$(document).ready(function()
{
  $('.sort_clients').click(function(e)
                           {
    var column = $(this).data('column');
    var direction = $(this).data('direction');
    
    console.log(column + ' ' + direction);
      
    if(direction === 'asc')
    {
      $(this).data('direction', 'desc');
    }
    else
    {
      $(this).data('direction', 'asc');
    }
    clientSort(column,direction);
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<button class="sort_clients" data-column="name" data-direction="asc">Name</button>
<button class="sort_clients" data-column="age" data-direction="asc">Age</button>
<button class="sort_clients" data-column="room" data-direction="asc">Room</button>

<div class="list">
  <div class="client" data-name="john" data-age="50" data-room="1 Alpha">John, 50, 1 Alpha</div>
  <div class="client" data-name="susan" data-age="80" data-room="2 Beta">Susan, 84, 2 Beta</div>
  <div class="client" data-name="brad" data-age="70" data-room="3 Delta">Brad, 70, 3 Delta</div>
  <div class="client" data-name="margaret" data-age="45" data-room="Romeo 1">Margaret, 45, Romeo 1</div>
  <div class="client" data-name="steph" data-age="75" data-room="Romeo 3">Steph, 75, Romeo 3</div>
  <div class="client" data-name="matt" data-age="65" data-room="Romeo2">Matt, 65, Romeo2</div>
</div>

Answer 1

https://jsfiddle.net/r1hzc3ny/

  return $(a).data(column).localeCompare($(b).data(column));

You need to use localCompare to compare the two strings.

Also brad was a typo.

Answer 2

Here you go, a simple yet elegant way to accomplish.

var listitems = ['ABAA','BBBBB','AAA'];
listitems.sort(function(a, b) {
   var compA = a;
   var compB = b;
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})


console.log(JSON.stringify(listitems));

Certainly, you can modify your return inside your sort function.

function clientSort(column,direction)
{
  var $divs = $(".client");

  if (direction=='asc')
  {
    var alphaDivs = $divs.sort(function (a, b) {
       return ($(a).data(column) < $(b).data(column)) ? -1 : ($(a).data(column) > $(b).data(column)) ? 1 : 0;
    });
    $(".list").html(alphaDivs);
  }
  else
  {
    if (direction=='desc')
    {
      var alphaDivs = $divs.sort(function (b, a) { 
        return ($(a).data(column) < $(b).data(column)) ? -1 : ($(a).data(column) > $(b).data(column)) ? 1 : 0;
      });
      $(".list").html(alphaDivs);
    }
  }
}

$(document).ready(function()
{
  $('.sort_clients').click(function(e)
                           {
    var column = $(this).data('column');
    var direction = $(this).data('direction');
    
    console.log(column + ' ' + direction);
      
    if(direction === 'asc')
    {
      $(this).data('direction', 'desc');
    }
    else
    {
      $(this).data('direction', 'asc');
    }
    clientSort(column,direction);
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<button class="sort_clients" data-column="name" data-direction="asc">Name</button>
<button class="sort_clients" data-column="age" data-direction="asc">Age</button>
<button class="sort_clients" data-column="room" data-direction="asc">Room</button>

<div class="list">
  <div class="client" data-name="john" data-age="50" data-room="1 Alpha">John, 50, 1 Alpha</div>
  <div class="client" data-name="susan" data-age="80" data-room="2 Beta">Susan, 84, 2 Beta</div>
  <div class="client" data-name="brad" data-age="70" data-room="3 Delta">Brad, 70, 3 Delta</div>
  <div class="client" data-name="margaret" data-age="45" data-room="Romeo 1">Margaret, 45, Romeo 1</div>
  <div class="client" data-name="steph" data-age="75" data-room="Romeo 3">Steph, 75, Romeo 3</div>
  <div class="client" data-name="matt" data-age="65" data-room="Romeo2">Matt, 65, Romeo2</div>
</div>

check this demo