JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

HTML

<script src="http://tinysort.googlecode.com/svn/trunk/web/scripts/jquery.tinysort.js"></script>
<ul>
    <li data-uid="x" data-status="away">John</li>
    <li data-uid="x" data-status="online">Tom</li>
    <li data-uid="x" data-status="online">Mary</li>
    <li data-uid="x" data-status="offline">Xiang</li>
    <li data-uid="x" data-status="away">Chris</li>
    <li data-uid="x" data-status="offline">Peter</li>
    <li data-uid="x" data-status="online">Matt</li>
</ul>
<br>
<br>
<button id="sorter">Sort me</button>

CSS

li[data-status='online']{
  border: 2px solid red;
}

li[data-status='away']{
  border: 2px solid blue;
}

li[data-status='offline']{
  border: 2px solid black;
}

JavaScript

var arrayStatus = ["away", "online", "offline"]

$("#sorter").click(function () {
    var sortedList = $('ul li').sort(function (a, b) {
        var chA = $(a).data('status');
        var chB = $(b).data('status');        
        if (arrayStatus.indexOf(chA) < arrayStatus.indexOf(chB)) return -1;
        if (arrayStatus.indexOf(chA) > arrayStatus.indexOf(chB)) return 1;
        return 0;
    }).sort(function (a, b) {
        var chA = $(a).data('status');
        var chB = $(b).data('status');        
        if (chA == chB){
            if ($(a).text()< $(b).text()) return -1;
            if ($(a).text()> $(b).text()) return 1;
        }
        return 0;
    });
$('ul').empty();    
$('ul').append(sortedList);
});