Sorting Input Text inside multiple div's using javascript / jquery?

Question

There are three fields(first name, Last name & age) displayed in text boxes. Each field is displayed in separate div's. There are 4 records. On clicking a sort button above each field the div records should be sorted based on the data type of the field and should displayed in the HTML page.

I tried the solution in this link

I can't use this because the records are displayed in text box within the div.

 <div id="content">
    <div>
      <div class="price"><input type="text" class="pri" value="120"/></div>
      <div class="dateDiv">2012-05-09 20:39:38.0</div>
      <div class="distance">20 mile</div>
    </div>

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

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

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

How can I do this in javascript?

Are you saying you want to sort the results based on the value of the input field? Also, why are you not sorting the data on the server side first rather than trying to sort in Javascript? — davidethell
– davidethell, Commented Aug 30, 2012 at 11:39
Please check your code above, your data is not consistent, is it fanme, lname, distance. OR price, datediv, distance? — Hazem Salama
– Hazem Salama, Commented Aug 30, 2012 at 11:50
@davidethell Yes. I've to sort the values in the input box which are inside div's. There is going to be lot of data, so posting the values to the server and again returning the sorted values back is going to be a huge process. And also whenever a new record is added the editor itself is going to sort the records. — Emmi
– Emmi, Commented Aug 30, 2012 at 12:21
@MishuCn This is the code used in the above link I referred. $('#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'); — Emmi
– Emmi, Commented Aug 30, 2012 at 12:23

Sender · Accepted Answer · 2012-08-31 12:34:50Z

0

see this demo using jquery.tinysort.min.js

Comments

Rubén López · Accepted Answer · 2012-08-30 11:44:44Z

You can use knockoutjs to do something like that.

For example, the html:

<div id="content" data-bind="foreach: lines">
    <div class="fname"><input type="text class="pri" data-bind="value: fname"/></div>
    <div class="lname" data-bind="text: lname"/>
    <div class="age" data-bind="text: age"/>
</div>

Javascript:

function EachDivViewModel(line)
{
   this.fname = line.fname;
   this.lname = line.lname;
   this.age = line.age;
}

function YourViewModel()
{
   var self = this;
   self.lines = ko.observableArray([]); // this array will contain elements of EachDivViewModel type

   self.handlerForYourSortButtongs = function() {
      // Code here to sort the array based on the button clicked
      // The UI will automatically get updated as you reorder the elements in the lines array
   }
}


$(document).ready(function() {
   var yourViewModelInstance = new YourViewModel();
   // Code to get the lines here
   ko.applyBindings(yourViewModelInstance);
});

Shawn Chin · Accepted Answer · 2012-08-30 16:27:40Z

-2

It can be done using tablesorter.

Hope that will help you out.

edited Aug 30, 2012 at 16:27

Shawn Chin

87.4k20 gold badges168 silver badges193 bronze badges

answered Aug 30, 2012 at 11:48

Ankit Pandey

3393 silver badges4 bronze badges

1 Comment

davidethell Over a year ago

Tablesorter doesn't really solve the problem because the OP is using DIVs not TABLEs.

Collectives™ on Stack Overflow

Sorting Input Text inside multiple div's using javascript / jquery?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related