M
mpm_three
My app builds a table dynamically from a javascript array and I'm using
WebFX's Sortable Table API to make it sortable. That all works fine.
What I added was the ability to rebuild the table with different
elements of my 'data' array. That works, but when I try and sort my
rebuilt table, the sort function can't seem to access the new table.
In general here is how it goes:
//Constructor
function SortableTable(table, sorttype) {
...
...
}
....
....
//Sorting function
SortableTable.prototype.sort = function (col, direction, sorttype) {
...
...
}
//Rebuild my Table
function makeTable(view) {
rebuild table (as a string) from data array
send it out using innerHTML
//construct new table object
var st = new SortableTable(document.getElementById(table-id));
}
//html
build a two row table for my headers
1st row onclick rebuilds table with different array elements
2nd row onclick calls sort function to sort by that column
//inline javascript (not a function) to build init table in global
scope
build init table as a string
send it out with document.write();
//construct new table object
var st = new SortableTable(document.getElementById(table-id));
//end inline javascript
//end html
When the page first loads the table is displayed and I can sort
by any column. I click on a different view and I get my rebuilt
table but no sorting capability. By inserting alerts within the
different functions I can verify that my new table object is
created with the current table-id, but the sorting function see's
only a blank/empty object. My feeling is it has to do with my
init table object being created with global scope and any new
table objects being created within a function. I'm very new
javascript especially involving OO stuff. Below is a sample.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sortable Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"
src="http://webfx.eae.net/dhtml/sortabletable/js/sortabletable.js">
</script>
<style type="text/css">
..sort-table {
WIDTH: 275px;
TEXT-ALIGN: center;
PADDING: 2px 0px;
}
</style>
<script type="text/javascript">
function StringBuilder(sString) {
this.length = 0;
this.append = function (sString) {
this.length +=
(this._parts[this._current++] = String(sString)).length;
this._string = null;
return this;
};
this.toString = function () {
if (this._string != null)
return this._string;
var s = this._parts.join("");
this._parts =;
this._current = 1;
this.length = s.length;
return this._string = s;
};
this._current = 0;
this._parts = [];
this._string = null;
if (sString != null)
this.append(sString);
}
var tData =
[['Table1Row0',256,148,'Table2Row0',456,987,'Table3Row0',345,356],
['Table1Row1',562,129,'Table2Row1',406,977,'Table3Row1',545,301],
['Table1Row2',976,443,'Table2Row2',956,981,'Table3Row2',845,213],
['Table1Row3',725,223,'Table2Row3',516,999,'Table3Row3',319,210],
['Table1Row4',125,929,'Table2Row4',156,229,'Table3Row4',499,121],
['Table1Row5',325,231,'Table2Row5',256,309,'Table3Row5',149,291]];
function makeTable(col) {
var tid = ['table-1','table-2','table-3'];
var sb = new StringBuilder();
var myDivId = document.getElementById("myDiv");
sb.append("<table id='"+tid[col]+"'class='sort-table' border='1'>");
sb.append("<tbody>");
var st = null;
var t = null;
if (col == 1) {
for (var j = 0; j < 6; j++) {
t = tData[j];
sb.append("<TR><TD WIDTH='95'>"+t[0]+"<TD WIDTH='90'>"+t[1]+
"<TD WIDTH='75'>"+t[2]+"</TR>");
}
} else if (col == 2) {
for (var j = 0; j < 6; j++) {
t = tData[j];
sb.append("<TR><TD WIDTH='95'>"+t[3]+"<TD WIDTH='90'>"+t[4]+
"<TD WIDTH='75'>"+t[5]+"</TR>");
}
} else {
for (var j = 0; j < 6; j++) {
t = tData[j];
sb.append("<TR><TD WIDTH='95'>"+t[6]+"<TD WIDTH='90'>"+t[7]+
"<TD WIDTH='75'>"+t[8]+"</TR>");
}
}
sb.append("</tbody></table>");
myDivId.innerHTML = sb;
var st = new SortableTable(document.getElementById(tid[col]));
}
</script>
</head>
<body>
<div id="divHead">
<TABLE class='sort-table' border="1">
<TR>
<TH WIDTH="111">
<A HREF="javascript:void(0)" onclick="makeTable(1)">Table1</A></TH>
<TH WIDTH="103">
<A HREF="javascript:void(0)" onclick="makeTable(2)">Table2</A></TH>
<TH WIDTH="82">
<A HREF="javascript:void(0)" onclick="makeTable(3)">Table3</A></TH>
</TR>
<TR>
<TH WIDTH="111">
<A HREF="javascript:void(0)" onclick=st.sort(0)>Sort0</A></TH>
<TH WIDTH="103">
<A HREF="javascript:void(0)" onclick=st.sort(1)>Sort1</A></TH>
<TH WIDTH="82">
<A HREF="javascript:void(0)" onclick=st.sort(2)>Sort2</A></TH></TR>
</TABLE></div>
<script type="text/javascript">
var tData
var sb = new StringBuilder();
sb.append("<div id='myDiv'>");
sb.append("<table id='table-1' class='sort-table' border='1'><tbody>");
var t = null;
for (var j = 0; j < 6; j++) {
t = tData[j];
sb.append("<TR><TD WIDTH='95'>"+t[0]+"<TD WIDTH='90'>"+t[1]+
"<TD WIDTH='75'>"+t[2]+"</TR>");
}
sb.append("</tbody></table></div>");
document.write(sb.toString());
var st = new SortableTable(document.getElementById("table-1"));
</script>
</body>
</html>
Any help would be greatly appreciated.
-Matt
WebFX's Sortable Table API to make it sortable. That all works fine.
What I added was the ability to rebuild the table with different
elements of my 'data' array. That works, but when I try and sort my
rebuilt table, the sort function can't seem to access the new table.
In general here is how it goes:
//Constructor
function SortableTable(table, sorttype) {
...
...
}
....
....
//Sorting function
SortableTable.prototype.sort = function (col, direction, sorttype) {
...
...
}
//Rebuild my Table
function makeTable(view) {
rebuild table (as a string) from data array
send it out using innerHTML
//construct new table object
var st = new SortableTable(document.getElementById(table-id));
}
//html
build a two row table for my headers
1st row onclick rebuilds table with different array elements
2nd row onclick calls sort function to sort by that column
//inline javascript (not a function) to build init table in global
scope
build init table as a string
send it out with document.write();
//construct new table object
var st = new SortableTable(document.getElementById(table-id));
//end inline javascript
//end html
When the page first loads the table is displayed and I can sort
by any column. I click on a different view and I get my rebuilt
table but no sorting capability. By inserting alerts within the
different functions I can verify that my new table object is
created with the current table-id, but the sorting function see's
only a blank/empty object. My feeling is it has to do with my
init table object being created with global scope and any new
table objects being created within a function. I'm very new
javascript especially involving OO stuff. Below is a sample.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sortable Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"
src="http://webfx.eae.net/dhtml/sortabletable/js/sortabletable.js">
</script>
<style type="text/css">
..sort-table {
WIDTH: 275px;
TEXT-ALIGN: center;
PADDING: 2px 0px;
}
</style>
<script type="text/javascript">
function StringBuilder(sString) {
this.length = 0;
this.append = function (sString) {
this.length +=
(this._parts[this._current++] = String(sString)).length;
this._string = null;
return this;
};
this.toString = function () {
if (this._string != null)
return this._string;
var s = this._parts.join("");
this._parts =
this._current = 1;
this.length = s.length;
return this._string = s;
};
this._current = 0;
this._parts = [];
this._string = null;
if (sString != null)
this.append(sString);
}
var tData =
[['Table1Row0',256,148,'Table2Row0',456,987,'Table3Row0',345,356],
['Table1Row1',562,129,'Table2Row1',406,977,'Table3Row1',545,301],
['Table1Row2',976,443,'Table2Row2',956,981,'Table3Row2',845,213],
['Table1Row3',725,223,'Table2Row3',516,999,'Table3Row3',319,210],
['Table1Row4',125,929,'Table2Row4',156,229,'Table3Row4',499,121],
['Table1Row5',325,231,'Table2Row5',256,309,'Table3Row5',149,291]];
function makeTable(col) {
var tid = ['table-1','table-2','table-3'];
var sb = new StringBuilder();
var myDivId = document.getElementById("myDiv");
sb.append("<table id='"+tid[col]+"'class='sort-table' border='1'>");
sb.append("<tbody>");
var st = null;
var t = null;
if (col == 1) {
for (var j = 0; j < 6; j++) {
t = tData[j];
sb.append("<TR><TD WIDTH='95'>"+t[0]+"<TD WIDTH='90'>"+t[1]+
"<TD WIDTH='75'>"+t[2]+"</TR>");
}
} else if (col == 2) {
for (var j = 0; j < 6; j++) {
t = tData[j];
sb.append("<TR><TD WIDTH='95'>"+t[3]+"<TD WIDTH='90'>"+t[4]+
"<TD WIDTH='75'>"+t[5]+"</TR>");
}
} else {
for (var j = 0; j < 6; j++) {
t = tData[j];
sb.append("<TR><TD WIDTH='95'>"+t[6]+"<TD WIDTH='90'>"+t[7]+
"<TD WIDTH='75'>"+t[8]+"</TR>");
}
}
sb.append("</tbody></table>");
myDivId.innerHTML = sb;
var st = new SortableTable(document.getElementById(tid[col]));
}
</script>
</head>
<body>
<div id="divHead">
<TABLE class='sort-table' border="1">
<TR>
<TH WIDTH="111">
<A HREF="javascript:void(0)" onclick="makeTable(1)">Table1</A></TH>
<TH WIDTH="103">
<A HREF="javascript:void(0)" onclick="makeTable(2)">Table2</A></TH>
<TH WIDTH="82">
<A HREF="javascript:void(0)" onclick="makeTable(3)">Table3</A></TH>
</TR>
<TR>
<TH WIDTH="111">
<A HREF="javascript:void(0)" onclick=st.sort(0)>Sort0</A></TH>
<TH WIDTH="103">
<A HREF="javascript:void(0)" onclick=st.sort(1)>Sort1</A></TH>
<TH WIDTH="82">
<A HREF="javascript:void(0)" onclick=st.sort(2)>Sort2</A></TH></TR>
</TABLE></div>
<script type="text/javascript">
var tData
var sb = new StringBuilder();
sb.append("<div id='myDiv'>");
sb.append("<table id='table-1' class='sort-table' border='1'><tbody>");
var t = null;
for (var j = 0; j < 6; j++) {
t = tData[j];
sb.append("<TR><TD WIDTH='95'>"+t[0]+"<TD WIDTH='90'>"+t[1]+
"<TD WIDTH='75'>"+t[2]+"</TR>");
}
sb.append("</tbody></table></div>");
document.write(sb.toString());
var st = new SortableTable(document.getElementById("table-1"));
</script>
</body>
</html>
Any help would be greatly appreciated.
-Matt