将多个div排序为一个而不使用jquery重新加载页面

时间：2015-04-11 18:23:02

标签： javascript jquery html sorting

我已尝试在表格和排序中执行此操作，现在将其格式化为div，希望简化但仍然没有运气。我尝试过的所有代码示例和jquery脚本只对div下面的一层进行排序。所以在我的情况下.member-col1我可以对所有成员名称进行排序，但它不适用于.member-col2到.member-col5。

我在3列中显示前40条成员的记录，然后显示接下来的40条，然后是40条等等。所以15列总共列1,4,7,10,13列为名字，列2,5,8,11,14是姓氏和列3,6,9,12,15。

因此，如果我想按名字排序，如果Abe Johnson排在第10列，那么在排序之后，他将位于第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>

这是它的示例HTML 

<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>

感谢您的帮助！

1 个答案:

答案 0 :(得分：0)

您可以使用css columns而不是将结果拆分为多个div。 http://jsfiddle.net/7sgw21hn/1
更多细节： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

您还可以在服务器上生成json对象

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

然后使用库来显示您的数据：
http://www.listjs.com/
http://isotope.metafizzy.co/layout-modes/vertical.html

使用tinySort进行排序的示例：http://jsfiddle.net/7sgw21hn/1/

相关问题
最新问题