2

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>  
5
  • 1
    If you table is written in divs it isn't a table :)
    – PeeHaa
    Jul 25, 2011 at 20:52
  • Can you show an example of your html?
    – PeeHaa
    Jul 25, 2011 at 20:52
  • 1
    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, 2011 at 20:53
  • @Chazbot: Sketchy at best. Inventive non the less :)
    – PeeHaa
    Jul 25, 2011 at 21:00
  • @peehaa: yes, it is not an html table, but at least looks like one :)
    – k-dev
    Jul 25, 2011 at 21:08

1 Answer 1

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.