var problem ... which assignment to make?

[Greg Russell]

Hello, in my PHP scripts I've incorporated the code from
http://www.webtoolkit.info/sortable-html-table.html to make the tables on
the delivered pages sortable by clicking on the column headers. Will someone
help me discover how to make the column footers also be a sortable link, as
some of my tables are quite large, and scrolling to the top to initiate a
sort is cumbersome when one has the bottom table footers right there.

The "tfoot" section is enabled by the addition in the <style> section of:

table tfoot {
cursor: pointer;
}

Although it enables the ability to invoke the javascript by clicking on the
table footers, the sort doesn't occur. I have determined that this is due to
a single line in the javascript code, but I can't seem to fathom how to
modify it so that both thead and tfoot (when clciked in the table) will
cause the sort:

var sortSection = this.thead; // enables sorting by clicking headers
or
var sortSection = this.tfoot; // enables sorting by clicking footers

Is there some way to make the var assignment so that either clicking the
headers or footers will cause the sort to happen, please?

 

[JR]

Hi,
Although the SortableTable() function contains the following line,
tfoot is not used along the code:

line 12: this.tfoot = tableEl.getElementsByTagName('tfoot');

The code chooses the sort section in the line 87:

87: var sortSection = this.thead; // this could be this.tfoot

What makes the sort operation runs is the onclick event handler
applied to the sortRow (thead's first row) object:

93: var sortRow = sortSection[0].rows[0];
98: for (var i=0; i<sortRow.cells.length; i++) {
99 sortRow.cells.sTable = this;
100 sortRow.cells.onclick = function () {
101 this.sTable.sort(this);
102 return false;

Therefore, you'll have to insert code inside the loop in order to set
the tfoot's onclick.

Joao Rodrigues

 

[Greg Russell]

In

87: var sortSection = this.thead; // this could be this.tfoot

What makes the sort operation runs is the onclick event handler
applied to the sortRow (thead's first row) object: ....
Therefore, you'll have to insert code inside the loop in order to set
the tfoot's onclick.

Thank you, I'm already aware of all the points you repeated. What I'm hoping
for is some help in making both the thead and tfoot event available in the
loop.

 

[JR]

Thank you, I'm already aware of all the points you repeated. What I'm hoping
for is some help in making both the thead and tfoot event available in the
loop.

Ok. Then that's what I did:

a) changed the style:
table thead, table tfoot {
cursor: pointer;
}

b) changed the code from line 77 onwards (I've changed my mind about
the loop as you'll see):

// define variables
var sortRow,
thisObject = this,
sortSectionH = this.thead,
sortSectionF = this.tfoot;

// constructor actions
if (!(this.tbody && this.tbody[0].rows && this.tbody
[0].rows.length > 0)) return;

if (sortSectionH && sortSectionH[0].rows && sortSectionH
[0].rows.length > 0) {
sortRow = sortSectionH[0].rows[0];
for (var i=0; i < sortRow.cells.length; i++) {
sortRow.cells.sTable = this; // 'this' means
SortableTable
sortRow.cells.onclick = function () {
this.sTable.sort(this); // 'this' means sortRow.cells
return false;
}
}
}

if (typeof sortSectionF == "undefined" || typeof sortSectionF[0] ==
"undefined") {
return;
} else if (sortSectionF[0].rows && sortSectionF[0].rows.length > 0)
{
sortRow = sortSectionF[0].rows[0];
for (var i=0; i<sortRow.cells.length; i++) {
sortRow.cells.sTable = this; // 'this' means SortableTable
sortRow.cells.onclick = function () {
this.sTable.sort(this); // 'this' means sortRow.cells
return false;
}
}
}
}

Hope this helps.
Joao Rodrigues

 

[Jorge]

Thank you for that effort, but it seems an extraordinary solution to
rewrite the major block of code to switch a a simple var assignment?

I was thinking something along the lines of:

        var thisObject = this;
//      var sortSection = this.thead;
        if (this.thead.length == 0) {
           var sortSection = this.tfoot;
        } else {
           var sortSection = this.thead;
        }

But tfoot and thead aren't mutually exclusive. They both may need to
have the click handlers attached.
There are a thousand different ways to do it, and Joao's is one of
them (and a perfectly right one).

One question, BTW, is why did the "sortabletable" author define "var
thisObject= this" and (ISTM) later forgot to use it: instead of adding
an ".sTable= this" property to each cell, he could have written (in
the sortRow.cells.onclick handler f()) "thisObject.sort(this);"
instead of "this.sTable.sort(this);", no ? That's what closures are
for.

 

[JR]

Hi Jorge and Greg,
Thanks for the inputs. I think that the original code is quite good
because it's very compact as compared to other codes I've seen around
Internet. But of course it needs an optimization and removal of the
clutter left behind (getParent, thisObject).

I decided to rewrite that code almost completely and add some cool
ideas from Stuart Langridge and some other JavaScript gurus such as
Dustin Diaz and Dean Edwards. You can take a look at:

http://www.jrfaq.com.br/sortable.htm

Hope you like it. Cheers,
Joao Rodrigues

Thank you for that effort, but it seems an extraordinary solution to
rewrite the major block of code to switch a a simple var assignment?

I was thinking something along the lines of:

        var thisObject = this;
//      var sortSection = this.thead;
        if (this.thead.length == 0) {
           var sortSection = this.tfoot;
        } else {
           var sortSection = this.thead;
        }

But tfoot and thead aren't mutually exclusive. They both may need to
have the click handlers attached.
There are a thousand different ways to do it, and Joao's is one of
them (and a perfectly right one).

One question, BTW, is why did the "sortabletable" author define "var
thisObject= this" and (ISTM) later forgot to use it: instead of adding
an ".sTable= this" property to each cell, he could have written (in
the sortRow.cells.onclick handler f()) "thisObject.sort(this);"
instead of "this.sTable.sort(this);", no ? That's what closures are
for.

 

[Jorge]

http://www.jrfaq.com.br/sortable.htm

Hope you like it. Cheers,
Joao Rodrigues

JAVA smell removed 8¬) : <http://jorgechamorro.com/cljs/029/>

 

[JR]

Hello, Jorge!
I liked that functional programming: javascript has been contaminated
with Java's style.

Unfortunately, I had to modify my original code (v 0.1), because of a
problem with date format (RegExp was modified to allow / - or .), the
need for var keyword before aa, bb variables (I noticed you already
did that too), and removal of tbody, thead and tfoot variables which
weren't actually necessary.

http://www.jrfaq.com.br/sortable.htm

Thanks,
Joao Rodrigues