Simple table sort for novice!

[EvolMonster]

Hiya guys

I am working on an existing website to add functionality around a price results table.
This table has 5 columns :

Price - Option1 - option2 - option3 - option 4

There are also 4 tick boxes on the page that when clicked, will add the cost of the option onto the price, so price becomes Price + option1 etc.

This part of the code has been completed, and I am happy that I am updating the price, and another tag called rank, which just contains the number value for price, without the pound sign etc.

What I now need to do, upon clicking these buttons, is to re-order the prices to have the cheapest at the top.

Fairly simple. But I am a complete novice with javascript!
I've tried downloading some overly complex table sort code, and I cant get it to work. So does anyone have anything to get me started?

Cheers in advance!
DB

 

[feherke]

Hi

I've tried downloading some overly complex table sort code, and I cant get it to work.

[ul]
[li]Which overly complex table sort code ?[/li]
[li]How you tried to get them work ?[/li]
[li]What they do instead of working ?[/li]
[/ul]

So does anyone have anything to get me started?

We have nothing. But you have : the page source. Show it. The best would be an URL to a publicly accessible version of that page.

Feherke.

http://rootshell.be/~feherke/

 

[EvolMonster]

I tried one downloaded off the web that lets you sort based on clicking on the header of the table, which isnt exactly what I want.
It threw up an error in firebug saying it wasnt a function or something.

I kinda decided that it was too complex for me to work with though, at over 1000 lines long.
I think I could get something working in much much less than that. With help!

The site I am trying to do this on is a commercial website.
Am I allowed to post the name of it in here?

 

[feherke]

Hi

I tried one downloaded off the web that lets you sort based on clicking on the header of the table, which isnt exactly what I want.

Most of the table sorter solutions will work that way. But when you click a table header, a function is called. So you only have to call that function from your code.

It threw up an error in firebug saying it wasnt a function or something.

Well, such "something" not helps at all. To suggest correction/workaround/alternative/anything, we need the exact error message.

I kinda decided that it was too complex for me to work with though, at over 1000 lines long.
I think I could get something working in much much less than that.

The table sorters differ in their speed and capabilities to handle formatted data. Those should be the primary criteria when choosing one.

The site I am trying to do this on is a commercial website.
Am I allowed to post the name of it in here?

Yes. As this is a site for IT professionals not hobbyists, many of the discussed problems are related to commercial sites. We simply must post such URLs and codes too.

Feherke.

http://rootshell.be/~feherke/

 

[EvolMonster]

Apologies for the vagueness!
I have removed the code for this table sort as it was hurting my mind. It looked way to complex, and seemed to be trying to cater for every possible scenario in existence!
So I decided to start a new function from scratch, after all, how hard can it be!!

I am a little uncomfortable about posting about my companies site. Dont want people think we dont know what we are doing!
I am just doing this as a learning excercise, as I havent had much exposure to web dev, I am a c# programmer by trade!

Anyways. I digress.

What I kinda need advice on is how to go about the table sort.
I have a static HTML table, that needs to be compared to itself. So I am assuming I need to whack the table row IDs and data into an array, and loop through the table comparing to the array?

One of my colleagues mentioned bubble sort. Not familiar with that, does that ring a bell with anyone?

 

[feherke]

Hi

So I decided to start a new function from scratch, after all, how hard can it be!!

Not too hard, given that you want to sort only by one specific column containing only numeric values. Personally I would be afraid by the browser compatibility part. Especially the incompatibilities between Explorer and the standards.

One of my colleagues mentioned bubble sort. Not familiar with that, does that ring a bell with anyone?

Bubble sort as far as I know is the least efficient sorting algorithm. Usually is studied in the first year of programming.

Feherke.

http://rootshell.be/~feherke/

 

[EvolMonster]

Ive ben out of Uni for quite some time now!

Im going to just try loading the table in and looping through it to start off with.
So i'll come back with more specific questions.
Looks like i'm being to vague to get meaningfull ansers back!

 

[feherke]

Hi

Looks like i'm being to vague to get meaningfull ansers back!

Yepp. In meantime this would be a generic function I would start with :

[gray]// table  reference to a table element[/gray]
[gray]// column number of column to sort by, starting from 0[/gray]
[gray]// skip   number of top rows to skip, defaults to 1[/gray]
[b]function[/b] [COLOR=darkgoldenrod]dosort[/color][teal]([/teal]table[teal],[/teal]column[teal],[/teal]skip[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] data[teal]=[][/teal]
  [b]if[/b] [teal]([/teal]skip[teal]==[/teal]undefined[teal])[/teal] skip[teal]=[/teal][purple]1[/purple]
  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal]skip[teal],[/teal]l[teal]=[/teal]table[teal].[/teal]rows[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal] data[teal].[/teal][COLOR=darkgoldenrod]push[/color][teal]([[/teal][COLOR=darkgoldenrod]parseFloat[/color][teal]([/teal]table[teal].[/teal]rows[teal][[/teal]i[teal]].[/teal]cells[teal][[/teal]column[teal]].[/teal]innerHTML[teal]),[/teal]table[teal].[/teal]rows[teal][[/teal]i[teal]]])[/teal]

  data[teal].[/teal][COLOR=darkgoldenrod]sort[/color][teal]([/teal][b]function[/b][teal]([/teal]a[teal],[/teal]b[teal])[/teal][teal]{[/teal][b]return[/b] a[teal][[/teal][purple]0[/purple][teal]]<[/teal]b[teal][[/teal][purple]0[/purple][teal]]?-[/teal][purple]1[/purple][teal]:[/teal]a[teal][[/teal][purple]0[/purple][teal]]>[/teal]b[teal][[/teal][purple]0[/purple][teal]]?[/teal][purple]1[/purple][teal]:[/teal][purple]0[/purple][teal]}[/teal][teal])[/teal]

  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]data[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal] [teal]{[/teal]
    [b]var[/b] row[teal]=[/teal]table[teal].[/teal][COLOR=darkgoldenrod]insertRow[/color][teal]([/teal]skip[teal]+[/teal]i[teal])[/teal]
    [b]for[/b] [teal]([/teal][b]var[/b] j[teal]=[/teal][purple]0[/purple][teal],[/teal]m[teal]=[/teal]data[teal][[/teal]i[teal]][[/teal][purple]1[/purple][teal]].[/teal]cells[teal].[/teal]length[teal];[/teal]j[teal]<[/teal]m[teal];[/teal]j[teal]++)[/teal] [teal]{[/teal]
      [b]var[/b] cell[teal]=[/teal]row[teal].[/teal][COLOR=darkgoldenrod]insertCell[/color][teal](-[/teal][purple]1[/purple][teal])[/teal]
      cell[teal].[/teal]innerHTML[teal]=[/teal]data[teal][[/teal]i[teal]][[/teal][purple]1[/purple][teal]].[/teal]cells[teal][[/teal]j[teal]].[/teal]innerHTML
    [teal]}[/teal]
    table[teal].[/teal][COLOR=darkgoldenrod]deleteRow[/color][teal](-[/teal][purple]1[/purple][teal])[/teal]
  [teal]}[/teal]
[teal]}[/teal]

[b]<table[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"thetable"[/i][/green][b]>[/b]
[b]<tr><th>[/b]Foo[b]</th><th>[/b]Sort[b]</th><th>[/b]Bar[b]</th></tr>[/b]
[b]<tr><td>[/b]A[b]</td><td>[/b]5[b]</td><td>[/b]Five[b]</td></tr>[/b]
[b]<tr><td>[/b]B[b]</td><td>[/b]7[b]</td><td>[/b]Seven[b]</td></tr>[/b]
[b]<tr><td>[/b]C[b]</td><td>[/b]444[b]</td><td>[/b]Four[b]</td></tr>[/b]
[b]<tr><td>[/b]D[b]</td><td>[/b]6.666[b]</td><td>[/b]Six[b]</td></tr>[/b]
[b]<tr><td>[/b]E[b]</td><td>[/b]2222[b]</td><td>[/b]Two[b]</td></tr>[/b]
[b]<tr><td>[/b]F[b]</td><td>[/b]9.876[b]</td><td>[/b]Nine[b]</td></tr>[/b]
[b]<tr><td>[/b]G[b]</td><td>[/b]1.234[b]</td><td>[/b]One[b]</td></tr>[/b]
[b]<tr><td>[/b]H[b]</td><td>[/b]0[b]</td><td>[/b]Zero[b]</td></tr>[/b]
[b]<tr><td>[/b]I[b]</td><td>[/b]88[b]</td><td>[/b]Eight[b]</td></tr>[/b]
[b]<tr><td>[/b]J[b]</td><td>[/b]3.333[b]</td><td>[/b]Three[b]</td></tr>[/b]
[b]</table>[/b]

[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"dosort(document.getElementById('thetable'),1);return false"[/i][/green][b]>[/b]sort by column 1[b]</a>[/b]

Works with Gecko ( FireFox, SeaMonkey, Epiphany, Galeon ), Presto ( Opera ), KHTML ( Konqueror ), WebKit ( Midori, Arora ).

Feherke.

http://rootshell.be/~feherke/

 

[EvolMonster]

Excellent. Thanks for that.
I dont entirely understand about 80% of that javascript code!

What I have so far is as follows.
It creates an array from the table first, then loops through the target table and compares the values and outputs higher or lower based on a comparison of the values.

Um, how do I insert a code snippit on this forum?

 

[EvolMonster]

Got it!
Here's the code :

function sortTable() {

    var targetTable = document.getElementById("results-table");
    var targetBody = targetTable.tBodies[0];
    var existingRowIds = "";

    for (var targetIndex = 0; targetIndex < targetBody.rows.length; targetIndex++) {
        var targetRow = targetBody.rows[targetIndex];
        if (targetRow.id != null && targetRow.id != '') {
            existingRowIds += targetRow.id + ',';
        }
    }

    var tableCompare = new Array();    

    for (var targetIndex = 0; targetIndex < targetBody.rows.length; targetIndex++) {

        var targetRow = targetBody.rows[targetIndex];
        var targetRowDetails = targetBody.rows[targetIndex + 1];
        var targetRank = Number(targetRow.getAttribute("rank"));

        targetIndex++
        alert(targetIndex);
        if (targetRow.id != null && targetRow.id != 0 && targetRow.id != '') {

            tableCompare[targetIndex] = targetRank;
            
        }
    }
    
    alert(tableCompare);

    for (var targetIndex = 0; targetIndex < targetBody.rows.length; targetIndex++) {

        var targetRow = targetBody.rows[targetIndex];        
        var targetRank = Number(targetRow.getAttribute("rank"));
        var arrayRow = tableCompare[targetIndex + 2];

        alert(arrayRow);

        if (targetRank >= tableCompare[targetIndex + 1]) {
           alert(targetRank + ' ' + arrayRow + 'Higher');

        }
        else {
           alert(targetRank + ' ' + arrayRow + 'Lower');
        }        
    }   

}

 

[EvolMonster]

OK. Latest code seems to be working.
It is only sorting one row at a time however. Any ideas?

function sortTable() {

    //alert('Table sort started');
    var targetTable = document.getElementById("results-table");
    var targetBody = targetTable.tBodies[0];
    var existingRowIds = new Array();
    var existingRank = new Array();

    //Generate array of quote IDs
    for (var targetIndex = 0; targetIndex < targetBody.rows.length; targetIndex++) {
        var targetRow = targetBody.rows[targetIndex];
        if (targetRow.id != null && targetRow.id != '') {
            existingRowIds[targetIndex]= targetRow.id;
        }
    };

    //Generate array of quote Ranks (prices)
    for (var targetIndex = 0; targetIndex < targetBody.rows.length; targetIndex++) {
        var targetRow = targetBody.rows[targetIndex];
        if (targetRow.id != null && targetRow.id != '') {
            existingRank[targetIndex] = targetRow.getAttribute("rank");
        }
    }

    //Loop through the table matching ID's    
    for (var targetIndex = 0; targetIndex < targetBody.rows.length; targetIndex++) {
        var targetRow = targetBody.rows[targetIndex];
        var targetRowDetails = targetBody.rows[targetIndex + 1];
        var targetRank = Number(targetRow.getAttribute("rank"));
        var targetID = targetRow.id;

        var greaterRow = null

        if (targetID == existingRowIds[targetIndex]
        && targetRank >= existingRank[targetIndex + 2]) {

            var greaterRow = targetBody.rows[targetIndex + 2];
            var greaterRowDetails = targetBody.rows[targetIndex + 3];                        

            targetBody.removeChild(greaterRow);
            targetBody.removeChild(greaterRowDetails);

            targetBody.insertBefore(greaterRow, targetRow);
            targetBody.insertBefore(greaterRowDetails, targetRowDetails);
            
        } 
    }  

}