CODEWITHSUNDEEP
javascriptjqueryhtmlsorting
Shawn
Shawn

Reputation: 3159

sorting elements that aren't in a HTML table using jquery

I have a set of DIVs that are displayed like a table, but aren't in an HTML table. The structure is like this:

   <div id="queryResult" style="display: block;">
   <div class="rRow">
      <div class="rCell4">Job</div>
      <div class="rCell4">Company</div>
      <div class="rCell4">Customer</div>
      <div class="rCell4">Product</div>
      <div class="rCell4">Balance</div>
   </div>
   <div class="rRow">
      <div class="rCell4 editMe">46549</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">Dry Transload</div>
      <div class="rCell4">XYZ co</div>
      <div class="rCell4">39.100</div>
      <div class="rCell4">26.48550</div>
   </div>
   <div class="rRow">
      <div class="rCell4 editMe">46549</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">Dry Transload</div>
      <div class="rCell4">MNOP co</div>
      <div class="rCell4">39.100</div>
      <div class="rCell4">26.48550</div>
   </div>   
   <div class="clr"></div>
</div>

When displayed it looks something like this: display

So what I want is to be able to sort the columns by clicking on the column header or something. I know there are jQuery/JavaScript libraries out there like sorttable but all the ones I find are expecting a HTML table.

Do I bite the bullet and just switch this over to a table, or is there another reasonable (easier) solution?

Upvotes: 0

Views: 61

Answers (2)

Arash DaneshAraste
Arash DaneshAraste

Reputation: 363

Here is a solution. I added some class to your html for more control.

HTML:

<div id="queryResult" style="display: block;">
   <div class="rRow header">
      <div class="rCell4">Job</div>
      <div class="rCell4">Company</div>
      <div class="rCell4">Customer</div>
      <div class="rCell4">Product</div>
      <div class="rCell4">Balance</div>
   </div>
   <div class="rRow body">
      <div class="rCell4 editMe">46549</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">VDry Transload</div>
      <div class="rCell4">XYZ co</div>
      <div class="rCell4">38.100</div>
      <div class="rCell4">18.48550</div>
   </div>
   <div class="rRow body">
      <div class="rCell4 editMe">46623</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">Dry Transload</div>
      <div class="rCell4">MNOP co</div>
      <div class="rCell4">31.100</div>
      <div class="rCell4">29.48550</div>
   </div>
  <div class="rRow body">
      <div class="rCell4 editMe">46145</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">ADry Transload</div>
      <div class="rCell4">JKH co</div>
      <div class="rCell4">42.100</div>
      <div class="rCell4">16.48550</div>
   </div>
   <div class="clr"></div>
</div>

And here is a jQuery to do sorting:

jQuery:

$('.header').children('.rCell4').each(function(index){
  $(this).click(function(){
    var container = $('#queryResult');
    var header = $('.header');
    var cmpCols = [];
    $('.body').each(function(){
      cmpCols.push($(this).children('.rCell4').eq(index));
    });
    for(i=0; i<cmpCols.length-1; i++){
      for(j=i; j<cmpCols.length; j++){
        if(cmpCols[i].text() > cmpCols[j].text()){
          var tmp = cmpCols[i];
          cmpCols[i] = cmpCols[j];
          cmpCols[j] = tmp;
        }
      }
    }
    container.html(header);
    for(i=0; i<cmpCols.length; i++){
      container.append(cmpCols[i].parent());
    }
  });
});

Working jsFiddle Example.

Upvotes: 1

Oliver
Oliver

Reputation: 189

If you gave each of your <div class="rRow"> elements a unique id, you could reorder them using jQuery .insertAfter();

e.g. for

<div class="rRow" id="row1">
      ...
</div>
<div class="rRow" id="row2">
      ...
</div>

you use $('#row1').insertAfter('#row2'); to flip the position of the two rows.

Then you just need a function which will read each value in a particular "column" in response to an onclick event on the header, get the values in that column, sort them, and reorder the rows.

Upvotes: 0

Related Questions