0

There's a fiddle (at http://jsfiddle.net/mjmitche/UhzfX/) of the JavaScript below, together with some html and css. If you click on the places where the images are supposed to be in the fiddle, then the grocery items lists are sorted alphabetically and/or by number--depending on which image you click.

This code is taken from a tutorial (not available online) which I'm trying to understand. I looked at sorting documentation but am still having trouble getting this.

Questions

1) inside function insertSortControls, there is a call on an anonymous function calling another function function() { sortTable('theList', 0, true)}. Depending on whether the list is supposed to be ascending or descending, the last parameter in the various calls is either set to true or false. If you look down at where function sortTable is defined function sortTable(whichTable, whichCol, sortDir) you will see true or false seems to refer to the sortDirection. My question is, how does setting true or false affect the sort direction? can you explain this?

2) inside function sortCallBack, you have code that looks like this

if (text1 < text2)
        return gbAscending ? -1 : 1;
    else if (text1 > text2)
        return gbAscending ? 1 : -1;
    else return 0;

What do the 1 and -1 refer to and how do they relate, if at all, to the "true" and "false" settings described in question 1 above.

Thank you. 

var gbAscending = true;
var gbCol = 0;

function addEventHandler(oNode, sEvt, fFunc, bCapture) {
    if (window.attachEvent)
        oNode.attachEvent("on" + sEvt, fFunc);
    else
        oNode.addEventListener(sEvt, fFunc, bCapture);
}

function insertSortControls() {
    var oLink;
    oLink = document.getElementById('ItemDescend');
    oLink.removeAttribute('href');
    addEventHandler(oLink, "click", function() { sortTable('theList', 0, true) }, false);
    oLink = document.getElementById('ItemAscend');
    oLink.removeAttribute('href');
    addEventHandler(oLink, "click", function() { sortTable('theList', 0, false) }, false);
    oLink = document.getElementById('PriceDescend');
    oLink.removeAttribute('href');
    addEventHandler(oLink, "click", function() { sortTable('theList', 1, true) }, false);
    oLink = document.getElementById('PriceAscend');
    oLink.removeAttribute('href');
    addEventHandler(oLink, "click", function() { sortTable('theList', 1, false) }, false);
}

function sortCallBack(a, b) {
    // each of the arguments passed to this function is a TR node
    // with one or more child TD nodes.
    // get the child node of each TR element that corresponds
    // to the column to be sorted.
    var col1 = a.getElementsByTagName("TD")[gbCol];
    var col2 = b.getElementsByTagName("TD")[gbCol];

    // now get the text node for each col
    var text1 = col1.firstChild.data;
    var text2 = col2.firstChild.data;

    // now that we have the text nodes, do the sorting
    if (text1 < text2)
        return gbAscending ? -1 : 1;
    else if (text1 > text2)
        return gbAscending ? 1 : -1;
    else return 0;
}

function sortTable(whichTable, whichCol, sortDir) {
    // get the table object that has the ID we were given as an argument
    var oTable = document.getElementById(whichTable);

    // begin by getting the node for the TBODY, since that
    // node contains all the rows to be sorted
    var oTBody = oTable.getElementsByTagName('TBODY')[0];

    // get all of the TR tags within the tbody
    var aTRows = oTBody.getElementsByTagName('TR');

    // store the length of the TR array
    var numRows = aTRows.length;

    gbAscending = sortDir;
    gbCol = whichCol;

    // make an array to hold each TR tag in the body.
    var theSortedRows = new Array(numRows);

    // copy each TR tag into the array. Do a "deep clone" on
    // each TR tag so that all of the child TD tags come along
    // with it.
    var i;
    for (i = 0; i < numRows; i++) {
        theSortedRows[i] = aTRows[i].cloneNode(true);
    }

    // now -- sort the array!
    theSortedRows.sort(sortCallBack);

    // now that the array has been sorted, we put back all of the
    // table rows that we had copied out earlier.

    // First, get rid of the the current TBODY.
    oTable.removeChild(oTBody);

    // make a new one in its place
    oTBody = document.createElement("TBODY");
    oTable.appendChild(oTBody);

    // now insert all of the sorted TR tags from the sorted array
    for (i = 0; i < numRows; i++) {
        oTBody.appendChild(theSortedRows[i]);
    }
}

addEventHandler(window, "load", insertSortControls, false);
Improve this question
0

3 Answers 3

Reset to default
1

The line of code sets the global variable gbAscending to true or false. Maybe sortDir would be better named as SortAscending. 

gbAscending = sortDir;

So in essence you're setting the SortAscending = true or SortAscending = false. This is global so it doesn't need to be passed to the method sortCallBack. 

if (text1 < text2)
    return gbAscending ? -1 : 1;
else if (text1 > text2)
    return gbAscending ? 1 : -1;
else return 0;

gbAscending ? -1 : 1;

Is a shorthand if then else statement.

So 

return (if gbAscending then -1 else 1);

And base case of 0 if text1 = text2.

This 1 and -1 does not relate to sortDir as that is directly tied to gbAscending.

Basically here a function is being passed into into array.sort(). The array elements are sorted based on each pair of elements "a" and "b" and the function's return value.

The possible return numbers are:

  • < 0 - a is to have a lower index that b in the list
  • 0 - a and b are equal so no sorting performed
  • > 0 - a is to have a higher index than b in the list
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

thank you. so if gbAscending was set to true, but then if a was lower than b in the code, when it returns [ gbAscending ? -1 : 1;] is gbAscending now set to false? does it return gbAscending and -1?
No. gbAscending does not get altered in the sortTable method not does it get returned. if a < b and gbAscending is true, the return will only return -1. It translates to if (a < b) { return (if True return -1 else return 1)}.
1

sortDir controls how the global variable gbAscending is set, which controls what the comparison function sortCallBack does.

sortCallBack (i.e., the thing passed into Array.sort) is called when Array.sort needs to compare two elements, and what it's supposed to do is to return something positive, zero or negative depending on whether its first argument should be sorted after, together with, or before its second argument. See, e.g., https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/sort for the details.

So the sortCallBack function in this code switches around its comparison results depending on gbAscending, which depends on sortDir.

Improve this answer

Comments

1

hehe it is very simple: 1)

if (text1 < text2)
    return gbAscending ? -1 : 1;
else if (text1 > text2)
    return gbAscending ? 1 : -1;
else return 0;

above is contained in the callback function and returning -1 means item shold go down the list, 1 means item should go up

2) actually it depends - depending on that the table will be sorted ascending or descending by default as I understand

Improve this answer

4 Comments

thank you very much. please clarify. how do you know that -1 means item should go down the list? where is this determined? is it a pre-determined javascript function, or is it set somewhere within this code?
this is the intention of the callback function: solutoire.com/2007/05/02/sorting-javascript-arrays improvedsource.com/view.php/…
and does it return gbAscending AND 1 or is the return setting gbAscending to a value of 1?
it retunr only 1 or -1 it does not change gbAScending at all. when gbAscending is true then retunr -1 else 1 - in the first if statement and in the second statement: when gbAscending is true then return 1 else -1

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.