sorting of div data using jquery or javascript

Question

I'm trying to sort some DIVS in different ways and I'm quite lost. I've been trying some stuff but I don't see how to get it to work. I have div data in following format. I have a dropdown with sorting options like sort by price, by distance and by creation date etc.. On selecting an optin from dropdown the divs data should be sorted and dispalyed accordingly. Example is I choose sort by price then data should be displayed in sorted order as with price starting from lower to higher.

I need your guidance on this.

<div id="contentContainer">
  <div id="content">
      <div>
        <div class="price">120</div>
        <div class="dateDiv">2012-05-09 20:39:38.0</div>
        <div class="distance">20 mile</div>
      </div>

      <div>
        <div class="price">123</div>
        <div class="dateDiv">2012-05-10 20:39:38.0</div>
        <div class="distance">30 mile</div>
      </div>

      <div>
        <div class="price">100</div>
        <div class="dateDiv">2012-05-11 20:39:38.0</div>
        <div class="distance">50 mile</div>
      </div>

      <div>
        <div class="price">124</div>
        <div class="dateDiv">2012-05-12 20:39:38.0</div>
        <div class="distance">60 mile</div>
       </div>
   </div>
</div>

Maybe you should use a table, and one of the many jquery plugins available. E.g. tablesorter.com — Tim
– Tim, Commented May 15, 2012 at 14:23
@Tim: Yes I understand that but to change this div format and use table format would be very messy I guess as I have lots of css and I have to invest too much time to change div format to table format while retaining the way data is displayed. — Sandy
– Sandy, Commented May 15, 2012 at 14:34

Yoshi · Accepted Answer · 2012-05-15 14:40:58Z

1

An example to sort by price:

$('#content div.price').map(function () {
  // map sort-value and relevant dom-element for easier handling
  return {val: parseFloat($(this).text(), 10), el: this.parentNode};
}).sort(function (a, b) {
  // a simple asc-sort
  return a.val - b.val;
}).map(function () {
  // reduce the list to the actual dom-element
  return this.el;
}).appendTo('#content'); // < inject into parent node

demo: http://jsfiddle.net/QmVsD/1/

a few notes:

the first map isn't really needed, but it makes the sorting callback much simpler.
you would need to supply different compare-callbacs for different data-types (e.g. dates, strings)

answered May 15, 2012 at 14:40

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Diodeus - James MacFarlane · Accepted Answer · 2012-05-15 14:23:11Z

0

What you've got there is actually a TABLE, so use a table and one of the existing table sorters.

There is nothing wring with using <table> when you have tabular data, and that's what you've got.

answered May 15, 2012 at 14:23

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Comments

Jayesh · Accepted Answer · 2012-05-15 14:34:43Z

0

The generated HTML is part of the presentation, while the sorting operation is part of the data model. You should separate these two concepts in your code.

In your case, store the data in arrays (data model). When you want to display the data to user only then lay it out in divs or table html. Do the sorting before you lay out the html. When the user chooses sorting option from the dropdown, empty the #contentContainer, sort the array of data, regenerate html of newly ordered data and insert it into #contentContainer.

answered May 15, 2012 at 14:34

Jayesh

53.6k23 gold badges82 silver badges101 bronze badges

Comments

Pagial · Accepted Answer · 2012-05-15 15:13:55Z

0

I just tested this and it worked fine for me. Youll just decide what you do with your array afterwards. :)



$(document).ready(function () {
var priceItems = $('.price');
var arr = new Array();
for (var i = 0; i < priceItems.length;i++) {
var tempInt = priceItems[i].innerHTML;
tempInt = parseInt(tempInt);
arr.push(tempInt);
}
arr.sort()  
});

All you now need, is use your array.

answered May 15, 2012 at 15:13

Pagial

111 bronze badge

Collectives™ on Stack Overflow

sorting of div data using jquery or javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related