Sorting multiple divs as one without reloading page using jquery

I have tried doing this in tables and sorting and now have it formatted into divs hoping to simplify but still am not having luck. All of the code examples and jquery scripts I’ve tried will only sort one layer below the div. So in my case .member-col1 I can get all of the members names sorted, however it doesn’t apply to .member-col2 through .member-col5.

I’m displaying first 40 records of members in 3 columns then to right of that next 40, then next 40 etc.. So 15 total columns with columns 1,4,7,10,13 being first names, columns 2,5,8,11,14 being last names and columns 3,6,9,12,15.

So if I want to sort by first name and if Abe Johnson is in column 10, then after sort he would be at the top of column 1.

<div id="content">
<div id="members">
  <? 
  if ($result) {
  $i = 0;
  echo '<div class="member-col1">';
  do {
      $row = mysql_fetch_array ($result, MYSQL_ASSOC);
      echo '<div class="member-info">
      <span class="member-fn" data-sort-firstname="'.$row['mem_fname'].'">'.$row['mem_fname'].'</span>
      <span class="member-ln" data-sort-lastname="'.$row['mem_lname'].'">'.$row['mem_lname'].'</span>
      <span class="member-age" data-sort-age="'.$row['mem_age'].'">'.$row['mem_age'].'</span>
      </div>';
      ++$i;
  }
  while ($i < 40);
  echo '</div>';
  $i = 0;
  echo '<div class="member-col2">';
  do {
      $row = mysql_fetch_array ($result, MYSQL_ASSOC);
      echo '<div class="member-info">
      <span class="member-fn" data-sort-firstname="'.$row['mem_fname'].'">'.$row['mem_fname'].'</span>
      <span class="member-ln" data-sort-lastname="'.$row['mem_lname'].'">'.$row['mem_lname'].'</span>
      <span class="member-age" data-sort-age="'.$row['mem_age'].'">'.$row['mem_age'].'</span>
      </div>';
      ++$i;
  }
  while ($i < 40);
  echo '</div>';
  $i = 0;
  echo '<div class="member-col3">';
  do {
      $row = mysql_fetch_array ($result, MYSQL_ASSOC);
      echo '<div class="member-info">
      <<span class="member-fn" data-sort-firstname="'.$row['mem_fname'].'">'.$row['mem_fname'].'</span>
      <span class="member-ln" data-sort-lastname="'.$row['mem_lname'].'">'.$row['mem_lname'].'</span>
      <span class="member-age" data-sort-age="'.$row['mem_age'].'">'.$row['mem_age'].'</span>
      </div>';
      ++$i;
  }
  while ($i < 40);
  echo '</div>';
  $i = 0;
  echo '<div class="member-col4">';
  do {
      $row = mysql_fetch_array ($result, MYSQL_ASSOC);
      echo '<div class="member-info">
      <span class="member-fn" data-sort-firstname="'.$row['mem_fname'].'">'.$row['mem_fname'].'</span>
      <span class="member-ln" data-sort-lastname="'.$row['mem_lname'].'">'.$row['mem_lname'].'</span>
      <span class="member-age" data-sort-age="'.$row['mem_age'].'">'.$row['mem_age'].'</span>
      </div>';
      ++$i;
  }
  while ($i < 40);
  echo '</div>';
  $i = 0;
  echo '<div class="member-col5">';
  do {
      $row = mysql_fetch_array ($result, MYSQL_ASSOC);
      echo '<div class="member-info">
      <span class="member-fn" data-sort-firstname="'.$row['mem_fname'].'">'.$row['mem_fname'].'</span>
      <span class="member-ln" data-sort-lastname="'.$row['mem_lname'].'">'.$row['mem_lname'].'</span>
      <span class="member-age" data-sort-age="'.$row['mem_age'].'">'.$row['mem_age'].'</span>
      </div>';
      ++$i;
  }
  while ($i < 40);  
  echo '</div>';      
  }
  ?>
  </div>
</div>

This is example HTML of it

<div id="content">
<div id="members"><div class="member-col1"><div class="member-info">
      <span class="member-fn" data-sort-firstname="Dirk">Dirk</span>
      <span class="member-ln" data-sort-lastname="Abe">Abe</span>
      <span class="member-age" data-sort-age="4">4</span>
      </div><div class="member-info">
      <span class="member-fn" data-sort-firstname="Gavin">Gavin</span>
      <span class="member-ln" data-sort-lastname="Ahumada">Ahumada</span>
      <span class="member-age" data-sort-age="1">1</span>
      </div><div class="member-info">
      <span class="member-fn" data-sort-firstname="Dusty">Dusty</span>
      <span class="member-ln" data-sort-lastname="Alm">Alm</span>
      <span class="member-age" data-sort-age="6">6</span></div></div><div class="member-col2"><div class="member-info">
      <span class="member-fn" data-sort-firstname="Aron">Aron</span>
      <span class="member-ln" data-sort-lastname="Corbell">Corbell</span>
      <span class="member-age" data-sort-age="20">20</span>
      </div><div class="member-info">
      <span class="member-fn" data-sort-firstname="Hans">Hans</span>
      <span class="member-ln" data-sort-lastname="Cork">Cork</span>
      <span class="member-age" data-sort-age="18">18</span>
      </div><div class="member-info">
      <span class="member-fn" data-sort-firstname="Doretha">Doretha</span>
      <span class="member-ln" data-sort-lastname="Corley">Corley</span>
      <span class="member-age" data-sort-age="1">1</span>
      </div><div class="member-info">
      <span class="member-fn" data-sort-firstname="Duncan">Duncan</span>
      <span class="member-ln" data-sort-lastname="Cribb">Cribb</span>
      <span class="member-age" data-sort-age="6">6</span>
      </div><div class="member-info">
      <span class="member-fn" data-sort-firstname="Lenny">Lenny</span>
      <span class="member-ln" data-sort-lastname="Critelli">Critelli</span>
      <span class="member-age" data-sort-age="16">16</span>
      </div></div><div class="member-col3"><div class="member-info">
      <<span class="member-fn" data-sort-firstname="Theodore">Theodore</span>
      <span class="member-ln" data-sort-lastname="Hedrick">Hedrick</span>
      <span class="member-age" data-sort-age="16">16</span>
      </div><div class="member-info">
      <<span class="member-fn" data-sort-firstname="Vida">Vida</span>
      <span class="member-ln" data-sort-lastname="Heyd">Heyd</span>
      <span class="member-age" data-sort-age="4">4</span>
      </div><div class="member-info">
      <<span class="member-fn" data-sort-firstname="Faye">Faye</span>
      <span class="member-ln" data-sort-lastname="Hightower">Hightower</span>
      <span class="member-age" data-sort-age="6">6</span>
      </div><div class="member-info">
      <<span class="member-fn" data-sort-firstname="Alberto">Alberto</span>
      <span class="member-ln" data-sort-lastname="Hoskinson">Hoskinson</span>
      <span class="member-age" data-sort-age="20">20</span>
      </div><div class="member-info">
      <<span class="member-fn" data-sort-firstname="Synthia">Synthia</span>
      <span class="member-ln" data-sort-lastname="Houchins">Houchins</span>
      <span class="member-age" data-sort-age="1">1</span>
      </div><div class="member-info">
      <<span class="member-fn" data-sort-firstname="Deandre">Deandre</span>
      <span class="member-ln" data-sort-lastname="Huntley">Huntley</span>
      <span class="member-age" data-sort-age="12">12</span>
      </div><div class="member-info">
      <<span class="member-fn" data-sort-firstname="Marshall">Marshall</span>
      <span class="member-ln" data-sort-lastname="Ifill">Ifill</span>
      <span class="member-age" data-sort-age="9">9</span>
      </div></div><div class="member-col4"><div class="member-info">
      <span class="member-fn" data-sort-firstname="Vincenzo">Vincenzo</span>
      <span class="member-ln" data-sort-lastname="Marano">Marano</span>
      <span class="member-age" data-sort-age="18">18</span>
      </div><div class="member-info">
      <span class="member-fn" data-sort-firstname="Franklin">Franklin</span>
      <span class="member-ln" data-sort-lastname="Martinek">Martinek</span>
      <span class="member-age" data-sort-age="24">24</span>
      </div><div class="member-info">
      <span class="member-fn" data-sort-firstname="Royal">Royal</span>
      <span class="member-ln" data-sort-lastname="Marzette">Marzette</span>
      <span class="member-age" data-sort-age="5">5</span>
      </div><div class="member-info">
      <span class="member-fn" data-sort-firstname="Dean">Dean</span>
      <span class="member-ln" data-sort-lastname="Mcbean">Mcbean</span>
      <span class="member-age" data-sort-age="15">15</span>
      </div></div><div class="member-col5"><div class="member-info">
      <span class="member-fn" data-sort-firstname="Rodney">Rodney</span>
      <span class="member-ln" data-sort-lastname="Schreiner">Schreiner</span>
      <span class="member-age" data-sort-age="1">1</span>
      </div><div class="member-info">
      <span class="member-fn" data-sort-firstname="Kory">Kory</span>
      <span class="member-ln" data-sort-lastname="Segovia">Segovia</span>
      <span class="member-age" data-sort-age="14">14</span>
      </div><div class="member-info">
      <span class="member-fn" data-sort-firstname="Alline">Alline</span>
      <span class="member-ln" data-sort-lastname="Seifried">Seifried</span>
      <span class="member-age" data-sort-age="25">25</span>
      </div><div class="member-info">
      <span class="member-fn" data-sort-firstname="Darron">Darron</span>
      <span class="member-ln" data-sort-lastname="Seiler">Seiler</span>
      <span class="member-age" data-sort-age="11">11</span>
      </div></div>      </div>
</div>

Thanks for any help!

Answer

You can use css columns instead of splitting your results in several divs. http://jsfiddle.net/7sgw21hn/1
more details: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

You could also generate a json object on your server

[ { firstname: "", name : "", age: "" }, ... ]

and then use a library to display your datas:
http://www.listjs.com/
http://isotope.metafizzy.co/layout-modes/vertical.html

an example of sorting, with tinySort: http://jsfiddle.net/7sgw21hn/1/

Leave a Reply

Your email address will not be published. Required fields are marked *