jQuery header sort in table made with div

Question

I want to order table content clicking in the header of each columns.

This question was already made here jQuery table header sort but the jquery plugin pointed out there (which actually is very good) works with table html tags. Is there a plugin out there to make exactly the same if my table is written with divs.

Html example:

<div class="table">
    <div class="header">
        <div class="col1">col1</div>
        <div class="col2">col2</div>
        <div class="col3">col3</div>        
    </div>    
    <div class="item">
        <div class="col1">content11</div>
        <div class="col2">content21</div>
        <div class="col3">content31</div>            
    </div>
    <div class="item">
        <div class="col1">content12</div>
        <div class="col2">content22</div>
        <div class="col3">content32</div>            
    </div>
</div>

This is an terrible workaround, but... as a last resort you can make a hidden table with the same data, use the plugin to sort it, and then read + deposit the contents of the sorted table into your divs. Yeah... sketchy I know. — Chazbot, Jul 25 '11 at 20:53
@peehaa: yes, it is not an html table, but at least looks like one :) — k-dev, Jul 25 '11 at 21:08

score 1 · Answer 1 · answered Jul 25 '11 at 21:10

If you can't get around writing the code yourself, the basic process to write this yourself would be as follows. Might sound like a pain, but if your data is clean jQuery's selectors will really help you out here:

Iterate through your data grid assigning 2 classes to each cell (one unique to the row, and one unique to the column). A nested loop would do it, along with jQuery's .addClass(). You'll need these later as jQuery selectors. I would include the table headers in this iteration, but assign them the class of 'label'.
Make each of your table headers $(".label") clickable.
When a $(.label) is clicked, get the classname of the row or column, and select all cells that match. Iterate over this array (html elements), and create a 2nd array of the data each cell contains (via .html(), perhaps). Sort this array, then use it to re-fill your original array of elements, and you're good.

Might sound complex, but jQuery was really built for this sort of thing. Good Luck.

jQuery header sort in table made with div

1 Answers1