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?

Code:

<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

Thread: sorting columns in several tables

Thread Tools

Search Thread

sorting columns in several tables

Bookmarks

Bookmarks

Posting Permissions