JavaScript sorting
<p>There's a fiddle (at <a href="http://jsfiddle.net/mjmitche/UhzfX/" rel="nofollow">http://jsfiddle.net/mjmitche/UhzfX/</a>) 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. </p>

<p>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. </p>

<p>Questions</p>

<p>1) inside <code>function insertSortControls</code>, there is a call on an anonymous function  calling another function <code>function() { sortTable('theList', 0, true)}</code>. Depending on whether the list is supposed to be ascending or descending, the last parameter in the various calls is either set to <code>true</code> or <code>false</code>. If you look down at where function sortTable is defined <code>function sortTable(whichTable, whichCol, sortDir)</code> 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? </p>

<p>2) inside function sortCallBack, you have code that looks like this</p>

<pre><code>if (text1 &lt; text2)
        return gbAscending ? -1 : 1;
    else if (text1 &gt; text2)
        return gbAscending ? 1 : -1;
    else return 0;
</code></pre>

<p>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. </p>

<p>Thank you. </p>

<pre><code>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 &lt; text2)
        return gbAscending ? -1 : 1;
    else if (text1 &gt; 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 &lt; 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 &lt; numRows; i++) {
        oTBody.appendChild(theSortedRows[i]);
    }
}

addEventHandler(window, "load", insertSortControls, false);
</code></pre>
