jQuery - Creating a simple alphanumeric .sort()

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>

Sorry I don't follow, changing it to strA > strB or vice versa doesn't help as far as I can tell. — Maurice, Jul 14 '20 at 11:22
Is the format `NUMBER[SPACE]STRING` And `STRING[SPACE]NUMBER`? — epascarello, Jul 14 '20 at 12:43

score 1 · Answer 1 · answered Jul 14 '20 at 11:22

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.

answered Jul 14 '20 at 11:22

John

5,942
3
42
79

You don't *need* to use localCompare, you can use `<` and `>`: https://stackoverflow.com/a/6712080/2181514 – freedomn-m Jul 14 '20 at 11:23
@freedomn-m Doesn't work on all strings: https://stackoverflow.com/questions/6712034/sort-array-by-firstname-alphabetically-in-javascript/16481400#16481400 – John Jul 14 '20 at 11:24
Thank you, initially I thought this solved my problem, and it does work in the sample set of data I provided, but when testing it against larger data sample it breaks down. Maybe you know how to fix this, but I keep getting localCompare is not a function. I tried to fix the error with toString(), but the sorting results are bizarre and clearly something wasn't working properly. Updated here https://jsfiddle.net/goldencarers/hfy7wega/17/ – Maurice Jul 15 '20 at 00:03

score 0 · Accepted Answer · edited Jul 14 '20 at 13:25

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

in your fiddle, you have mistyped data-name="brad" as data-name="nrad" so please check, that may cause not to sort properly. — Viroj Fernando, Jul 14 '20 at 12:46

jQuery - Creating a simple alphanumeric .sort()

2 Answers2