CODEWITHSUNDEEP
jquerysortingjquery-plugins
k-dev
k-dev

Reputation: 1657

jQuery header sort in table made with div

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>

Upvotes: 2

Views: 2393

Answers (1)

Chazbot
Chazbot

Reputation: 1890

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.

Upvotes: 1

Related Questions