Standardista Table Sorting is a nice little javascript/css utility for creating sortable html tables. The tool was written by Neil Crosby in February of 2006. It’s a wonderful piece of code that has graced the pages of HnlHousing.com since day 1.
Why am I writing about it now? I randomly received a comment to my last blog post from melksnor asking if I could help him get the Standardista Tables working correctly within an AJAX page.
While Standardista is a solid little tool, it can be a little fickle and hard to trouble shoot. I originally had a problem, while developing HnlHousing.com, where the initialization of the tables would occur before they were populated with data from the AJAX portion of the site. So I had a nice little sortable html table, but no data.
The solution was to add the event listeners as directed by the documentation, and then only after the table is populated with data call the standardistaTableSortingInit() function. The standardistaTableSortingInit() function parses the page it’s called from for tables with the ’sortable’ css class name. It then enters it’s own code around the table headers to make the table sortable.
I’ve included some generic sample code:
addEvent(window, ‘load’, myInit);
addEvent(window, ‘unload’, myCleanUp);
function myInit()
{
//table_html is an AJAX function which populates
//the table with data using the standardista
//row structure.
$(”listingTable”).innerHTML = table_html();
//calls the init function on the standardista-table
standardistaTableSortingInit();
}
//The HTML generated should match this schema. This was take directly from the Standardista page.
<table class=’sortable’>
<thead>
<tr>
<th>Date</th>
<th>Fore</th>
<th>Surname</th>
<th>Price</th>
<th>IP Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>21/01/2006</td>
<td>Neil</td>
<td>Crosby</td>
<td class=’numeric’>$1.96</td>
<td>192.168.1.1</td>
</tr>
<tr class=’odd’>
<td>01/02/2006</td>
<td>Becca</td>
<td>Courtley</td>
<td class=’numeric’>$23.95</td>
<td>192.167.2.1</td>
</tr>
<tr>
<td>17/11/2004</td>
<td>David</td>
<td>Freidman-Jones</td>
<td class=’numeric’>$14.00</td>
<td>192.168.2.1</td></tr>
</tbody>
</table>
My hope is that melksnor and I can trouble shoot his problem publicly and this will be come a accessible resource for those who come across the problem in the future.
Back at work, so im gonna work on the code again, will leave my findings here! thanks so much
Hi Again, this is a stripped down version of my page, in the script i load startup with addevent, which creates the table, and then calls standardista. the table becomes clickable but when clicked on, this error is the result:
that.getInnerText(b.cells[that.sortColumnIndex]) has no properties
sortCaseInsensitive(tr.odd, tr)standardista-tabl… (line 269)
headingClicked(click clientX=0, clientY=0)standardista-tabl… (line 156)
[Break on this error] var bb = that.getInnerText(b.cells[that.sortColumnIndex]).toLowerCase();
this error is on line 269 of the standardista js
Thanks for looking!
heres the html page:
[code]
tableHandle = document.getElementById(”data_contents”);
addEvent(window, ‘load’, startup);
function startup()
{
tableHandle = document.getElementById(”data_contents”);
tableHandle.innerHTML = getTableContents(); //this is where the div gets its dynamic table
standardistaTableSortingInit();
}
function getTableContents () //function to create dummy table
{
tableArray = dummyTableData();
tableString = new String();
tableString = “Resubmitted Audits”
//First Row
tableString = “”;
for ( i=0 ; i” tableArray[i][0] “”;
}
tableString = “”;
tableString = “”;
for ( i=0 ; i” tableArray[i][1] “”;
}
//table row generation
tableString = “”
tableString = “”;
for ( i=0 ; i” tableArray[i][2] “”;
}
//table row generation
tableString = “”
tableString = “”;
return tableString;
}
function dummyTableData() //function contains dummmytable
{
tableArray = new Array();
for ( i=0 ; ia very very long long loooong audit name“;
tableArray[3][1]= “Tweedy, Jeff“;
tableArray[4][1]= “1-14-2007″;
tableArray[5][1]= “23″;
tableArray[6][1]= “1-15-2007″;
tableArray[0][2]= “CA”;
tableArray[1][2]= “52ndst”;
tableArray[2][2]= “audit name“;
tableArray[3][2]= “Tweedy, Jeff“;
tableArray[4][2]= “2-14-2007″;
tableArray[5][2]= “13″;
tableArray[6][2]= “21-15-2007″;
return tableArray;
}
Resubmitted Audits
[/code]
god im so dumb, the standardista couldnt get cell contents because in the table creating string I put where it needed to be
aaaaaaaaaaaaaah
thanks so much for your example though, cause i also made the error of calling
addEvent(window, ‘load’, myInit());
instead of
addEvent(window, ‘load’, myInit);
You rock!
that post looks weird hehe, i said:
i put instead of
Well that was easy
, I’m glad you figured it out. Can you describe in more detail your mistake?
your site didnt let me post html but my generated table had flaws in it, i didnt close the _<_t_r_>_'s with _<_/_t_r_>_ but with another _<_t_r_>_, so table rows never stopped. firefox and IE still displayed a perfect looking table, but it was crooked on the inside
I just found your comments in my akistmet spam bin :-/. I’m glad you found your bug. The dumbest mistakes are usually the hardest to find!