PDA

View Full Version : sorting columns in several tables



golmiami
06-02-2008, 05:16 PM
I have go this far, I have the sorting script working on the first table but any additional tables won't work. (even if I use a different id of the new table). How can I assign variables for each table?



<html>
<head>
<style type="text/css">
<!--
.wide {
width:829px;
}
.narrow {
width:108px;
}
.comp {
margin: 1em 0;
}
-->
</style>
<style type="text/css">

table thead td{
font-weight:bold;
cursor:pointer;
text-align: left;
}
.highlightedColumn{

}
</style>

<script type="text/javascript">


var tableWidget_okToSort = true;
var tableWidget_arraySort = new Array();
tableWidget_tableCounter = 1;
var activeColumn = new Array();
var currentColumn = false;

function sortNumeric(a,b){

a = a.replace(/,/,'.');
b = b.replace(/,/,'.');
a = a.replace(/[^\d\.\/]/g,'');
b = b.replace(/[^\d\.\/]/g,'');
if(a.indexOf('/')>=0)a = eval(a);
if(b.indexOf('/')>=0)b = eval(b);
return a/1 - b/1;
}


function sortString(a, b) {

if ( a.toUpperCase() < b.toUpperCase() ) return -1;
if ( a.toUpperCase() > b.toUpperCase() ) return 1;
return 0;
}

function sortTable()
{
if(!tableWidget_okToSort)return;
tableWidget_okToSort = false;

var obj = this;
var indexThis = 0;
while(obj.previousSibling){
obj = obj.previousSibling;
if(obj.tagName=='TD')indexThis++;
}

if(this.getAttribute('direction') || this.direction){
direction = this.getAttribute('direction');
if(navigator.userAgent.indexOf('Opera')>=0)direction = this.direction;
if(direction=='ascending'){
direction = 'descending';
this.setAttribute('direction','descending');
this.direction = 'descending';
}else{
direction = 'ascending';
this.setAttribute('direction','ascending');
this.direction = 'ascending';
}
}else{
direction = 'ascending';
this.setAttribute('direction','ascending');
this.direction = 'ascending';
}

var tableObj = this.parentNode.parentNode.parentNode;
var tBody = tableObj.getElementsByTagName('TBODY')[0];

var widgetIndex = tableObj.getAttribute('tableIndex');
if(!widgetIndex)widgetIndex = tableObj.tableIndex;

if(currentColumn)currentColumn.className='';
document.getElementById('col' + widgetIndex + '_' + (indexThis+1)).className='highlightedColumn';
currentColumn = document.getElementById('col' + widgetIndex + '_' + (indexThis+1));


var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String
if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){
if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction');
}

activeColumn[widgetIndex] = this;

var cellArray = new Array();
var cellObjArray = new Array();
for(var no=1;no<tableObj.rows.length;no++){
var content= tableObj.rows[no].cells[indexThis].innerHTML+'';
cellArray.push(content);
cellObjArray.push(tableObj.rows[no].cells[indexThis]);
}

if(sortMethod=='N'){
cellArray = cellArray.sort(sortNumeric);
}else{
cellArray = cellArray.sort(sortString);
}

if(direction=='descending'){
for(var no=cellArray.length;no>=0;no--){
for(var no2=0;no2<cellObjArray.length;no2++){
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
cellObjArray[no2].setAttribute('allreadySorted','1');
tBody.appendChild(cellObjArray[no2].parentNode);
}
}
}
}else{
for(var no=0;no<cellArray.length;no++){
for(var no2=0;no2<cellObjArray.length;no2++){
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
cellObjArray[no2].setAttribute('allreadySorted','1');
tBody.appendChild(cellObjArray[no2].parentNode);
}
}
}
}

for(var no2=0;no2<cellObjArray.length;no2++){
cellObjArray[no2].removeAttribute('allreadySorted');
}

tableWidget_okToSort = true;


}
function initSortTable1(objId,sortArray)

{
var obj = document.getElementById(objId);
obj.setAttribute('tableIndex',tableWidget_tableCounter);
obj.tableIndex = tableWidget_tableCounter;
tableWidget_arraySort[tableWidget_tableCounter] = sortArray;
var tHead = obj.getElementsByTagName('THEAD')[0];
var cells = tHead.getElementsByTagName('TD');
for(var no=0;no<cells.length;no++){
if(sortArray[no]){
cells[no].onclick = sortTable;
}else{
cells[no].style.cursor = 'default';
}
}
for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */
if(sortArray[no2] && sortArray[no2]=='N')obj.rows[0].cells[no2].style.textAlign='left';
}

tableWidget_tableCounter++;
}
</script>
<script type="text/javascript">
<!--
if(document.getElementById)
window.onload=function(){
var buts = ['but1', 'but2', 'but3'],
findTr = function(el){
while (el.parentNode){
el = el.parentNode;
if (el.tagName.toLowerCase() == 'tr')
return el;
}
return false;
};
for (var i = buts.length - 1; i > -1; --i)
document.getElementById(buts[i]).onclick = function(){
var check = this.form.elements;
for(var i = check.length - 1; i > -1 ; --i)
if(check[i].type && check[i].type == 'checkbox' && !check[i].checked && findTr(check[i]))
findTr(check[i]).style.display = 'none';
};
};
// -->
</script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>

</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><form action="#">
<table id="myTable" width="953" border="1">

<colgroup>
<col id="col1_1"></col>
<col id="col1_2"></col>
<col id="col1_3"></col>
<col id="col1_4"></col>
<col id="col1_5"></col>
<col id="col1_6"></col>
</colgroup>
<thead>
<tr>
<td width="90">Name</td>
<td width="29">Age</td>
<td width="46">Position</td>
<td width="40">Income</td>
<td width="91">Gender</td>
<td width="199">g</td>
<td width="199">&nbsp;</td>
</tr>
</thead>
<tr id="dd2a">
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6val1</td>
<td class="narrow"><input type="checkbox" name="modtype3a" value="value2">
<label>value1</label></td>
</tr>
<tr id="dd3a">
<td>col12</td>
<td>col22</td>
<td>col32</td>
<td>col42</td>
<td>col52</td>
<td>col6val2</td>
<td class="narrow"><input type="checkbox" name="modtype4a" value="value3">
<label>value2</label></td>
</tr>
<tr id="dd4a">
<td>col13</td>
<td>col23</td>
<td>col33</td>
<td>col43</td>
<td>col53</td>
<td>col6val3</td>
<td class="narrow"><input type="checkbox" name="modtype5a" value="value4">
<label>value3</label></td>
</tr>
</table>
<div class="comp">
<input type="button" name="onclick2" id="but1" value="Compare">
</div>

</form></div>


</div>
</div>
<script type="text/javascript">
initSortTable1('myTable',Array('S','N','S','N','S','N'));
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

golmiami
06-02-2008, 05:35 PM
firebog gives me tis error

document.getElementById("col" + widgetIndex + "_" + (indexThis + 1)) has no properties