S.Oruc S.Oruc - 2 months ago 9
CSS Question

Sort the divs by content

I have a problem.



.titel
{
display: inline-block;
padding:5px 0 ;
}

#sort div div
{
display: inline-block;
padding:5px 0 ;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div>
<div class="titel achternaam" >Achternaam</div>
<div class="titel voornaam" >Voornaam</div>
<div class="titel kantoor" >Kantoor</div>
</div>



<div class="spann">
<span class="ui-icon ui-icon-circle-triangle-n"></span>
<span class="ui-icon ui-icon-circle-triangle-s"></span>
<span class="ui-icon ui-icon-circle-triangle-n"></span>
<span class="ui-icon ui-icon-circle-triangle-s"></span>
<span class="ui-icon ui-icon-circle-triangle-n"></span>
<span class="ui-icon ui-icon-circle-triangle-s"></span>
</div>


<div id="sort">
<div class="someaspcode" onClick="someaspcodethatifyouclickitwilgotothepage">
<div class="achternaam">bill</div>
<div class="voornaam">gates</div>
<div class="kantoor">123</div>
</div>

<div class="someaspcode" onClick="someaspcodethatifyouclickitwilgotothepage">
<div class="achternaam">jhonny</div>
<div class="voornaam">depp</div>
<div class="kantoor">43321</div>
</div>






The data from div with id sort comes from a database (thats the reason ,that I show it like this)

What I whant to do is :

If I click on the first icon it shows the list sorted by voornaam(asc)
If I click on the second icon it shows the list sorted by voornaam(desc)
If I click on the third icon it shows the list sorted by achternaam (asc)
and so further

I have tried everything that I found on stackoverflow and google but none of it worked.

Can someone give me a good piece of advice.

what i whant is something like this

http://jsfiddle.net/7sgw21hn/1/

but it must read the content

things i tried

jQuery - Sorting div contents

https://www.sitepoint.com/community/t/sort-div-order-alphabetically-based-on-contents/39955/2

and many more (can't find it right now)

this is before i click

enter image description here

and this is after

enter image description here

can we do something about this

Answer

Here's the demo: http://output.jsbin.com/muwupihire

As mentioned, the first two buttons sort asc and desc on first name. The second two buttons sort asc and desc on last name.

My code uses bubble sort and takes advantage of replaceChild for performance benefits.

Also with the code below, adding more controls for this data is now trivial.

Code below, any questions just ask.

var controls = document.querySelectorAll('.spann > span');
var dataContainer = document.querySelector('#sort');
var data = document.querySelectorAll('#sort > div');

// select controls
var ascAchternaam = controls[0];
var descAchternaam = controls[1];
var ascVoornaam = controls[2];
var descVoornaam = controls[3];

// define a user type
function User(achternaam, voornaam, kantoor) {
  this.achternaam = achternaam;
  this.voornaam = voornaam;
  this.kantoor = kantoor;
}

function bubbleSort(order, data, prop) {
  // copy data array
  var sortingArr = Array.prototype.slice.call(data);
  for (var i = sortingArr.length - 1; i >= 0; i--) {
    for (var j = 1; j <= i; j++) {
      if (order == 'asc') {
        if (sortingArr[j-1][prop] > sortingArr[j][prop]) {
          var temp = sortingArr[j-1]; 
          sortingArr[j-1] = sortingArr[j]; 
          sortingArr[j] = temp;    
        }     
      } else {
        if (sortingArr[j-1][prop] < sortingArr[j][prop]) {
          var temp = sortingArr[j-1]; 
          sortingArr[j-1] = sortingArr[j]; 
          sortingArr[j] = temp;    
        }     
      }
    }
  }

  return sortingArr;
}

// event action
function sortOnclick(order, data, prop) {
  var sorted = bubbleSort(order, data, prop);

  for (var i = 0; i < sorted.length; i++) {
    var user = sorted[i];
    var wrapper = document.createElement('div');
    var innerFrag = document.createDocumentFragment();
    wrapper.className = 'someaspcode';

    for (var key in user) {
      var div = document.createElement('div');
      div.className = key;
      div.textContent = user[key];
      innerFrag.appendChild(div);
    }

    wrapper.appendChild(innerFrag);
    dataContainer.replaceChild(wrapper, dataContainer.children[i]);
  }

  return sorted;
}

// used to make the data into a format we need
function formatUsers(data) {
  var userData = [];

  for (var i = 0; i < data.length; i++) {
    var userElem = data[i];
    var fname = userElem.querySelector('.achternaam').textContent;
    var lname = userElem.querySelector('.voornaam').textContent;
    var office = userElem.querySelector('.kantoor').textContent;
    userData.push(new User(fname, lname, office));
  }

  return userData;
}

// sorter
function initSorter(data) {
  // reshape our data
  var userData = formatUsers(data);
  // add event listeners to controls
  ascAchternaam.addEventListener('click', function() {
    sortOnclick('asc', userData, 'achternaam');
  });
  descAchternaam.addEventListener('click', function() {
    sortOnclick('desc', userData, 'achternaam');
  });
  ascVoornaam.addEventListener('click', function() {
    sortOnclick('asc', userData, 'voornaam');
  });
  descVoornaam.addEventListener('click', function() {
    sortOnclick('desc', userData, 'voornaam');
  });
}

// init our sorter
initSorter(data);