Как сделать div отсортированным?

Question

У меня есть таблица div, как для страницы, можно ли ее сортировать как html-таблицу с javascript?

Я переехал из обычного стола, потому что мне не удалось продолжить его использование из-за этого How to add td rowspans to a table? и таким образом использовала таблицу div.

поэтому я использовал эту Div таблицу и единственное, что им не хватает, как сделать это сортируется таким образом я могу сортировать его товар или цена .. как DataTables, TableSorter и т.д.

<div class="Header">  
    <div class="item"><a href="#">Item</a> 
    </div> 
    <div class="desc"><a href="#">Description</a> 
    </div>  
    <div class="price"><a href="#">Price</a> 
    </div>  
    <div class="status"><a href="#">Status</a> 
    </div> 
</div> 

<div class="Info"> 
    <div class="itemName"> 
    <div class="item">Item 1</div> 
    </div> 
    <div class="itemInfo"> 
    <div class="List"> 
     <div class="Desc">Description 1</div> 
     <div class="Box">     
     <div class="price">$79</div> 
     <div class="status">16 in stock</div> 
     </div> 
    </div> 
    </div> 
</div> 

полный код здесь http://codepen.io/anon/pen/empqyN?editors=110 и здесь http://jsfiddle.net/a4fcxzra/

Answer 1

Вот сортировки обработчика (Классы заголовка должны быть такими же, как, где информация находится, поэтому изменилось в ДЕСК заголовочных Desc)

var sorting=1; 
$(".Header div").each(function(){ 
    $(this).click(function(){ 
     var cl=$(this).attr("class") // get header class, this is where I get info from 
     sorting = sorting == 1 ? -1 : 1 ;   // sorting asc or desc 
     $(".Info").detach().sort(function(a,b){ 
      var str1=$(a).find('.'+cl).text(); // get text 
      var str2=$(b).find('.'+cl).text(); 
      var n1 = str1.match(/\d+/)[0] //get digits in text 
      var n2 = str2.match(/\d+/)[0] 
      if(n1 != ''){ // if its a number 
       return n1*sorting > n2*sorting; // sort by number 
      }else{ // sort by string 
       return sorting == 1 ? str1 > str2 : str1 < str2 
      } 
     }).appendTo($(".Header").parent()); 
    }) 
}) 

Рабочая Fiddle: http://jsfiddle.net/juvian/a4fcxzra/1/

Answer 2

вы можете отсортировать массив с помощью JavaScript, а затем создать тег динамически размещать их в заголовках столбцов (которые вы должны создать в HTML для лучшей производительности)