PUBLICIDADE
Este código tem nota
10

Autor

rlpa

Rodrigo Araujo

membro deste abril de 2007

Tags

Compartilhe e guarde

  • Rec6
  • StumbleUpon
  • ueba
  • linkk
  • dihitt
  • linkloko
  • linkto
  • Technorati
  • Simpy
  • del.icio.us
  • Faves: Fave It!

PUBLICIDADE

Enquete

Que linguagem server-side você utiliza?

Ordenar colunas de uma tabela com cabeçalho fixo


Ordene os registros de uma determinada coluna de uma tabela com cabeçalho fixo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<title>Ordenar tabela com cabeçalho fixo</title>
<style type="text/css">
body{
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	font-size:0.8em;

}
p{
	margin-bottom:0px;
	font-weight:bold;
}
.ad{
	margin-top:30px;
}

/* Start layout CSS */
.tableWidget_headerCell,.tableWigdet_headerCellOver,.tableWigdet_headerCellDown{	/* General rules for both standard column header and mouse on header of sortable columns */
	cursor:pointer;	
	border-bottom:3px solid #C5C2B2;
	border-right:1px solid #ACA899;
	border-left:1px solid #FFF;	
	background-color: #ECE9D8;
}

.tableWidget_headerCell{	/* Standard column header */
	border-top:2px solid #ECE9D8;
	
}

.tableWigdet_headerCellOver{	/* Rollover on sortable column header */
	border-top:2px solid #FFC83C;		
}
.tableWidget tbody .tableWidget_dataRollOver{	/* Rollover style on mouse over (Data) */
	background-color:#FFF;	/* No mouseover color in this example - specify another color if you want this */
}

.tableWigdet_headerCellDown{
	border-top:2px solid #FFC83C;	
	background-color:#DBD8C5;
	border-left:1px solid #ACA899;
	border-right:1px solid #FFF;			
}
.tableWidget td{
	margin:0px;
	padding:2px;
	border-bottom:1px solid #EAE9E1;	/* Border bottom of table data cells */
	
}
.tableWidget tbody{
	background-color:#FFF;
}
.tableWidget{
	font-family:arial;
	font-size:12px;	
	width:400px;
}
	
/* End layout CSS */


div.widget_tableDiv {
	border:1px solid #ACA899;	/* Border around entire widget */
	height: 200px;
	overflow:auto;
	overflow-y:auto;
	overflow:-moz-scrollbars-vertical;
	width:400px;

}

html>body div.widget_tableDiv {
	overflow: hidden;
	width:400px;
}

.tableWidget thead{
	position:relative;
}
.tableWidget thead tr{
	position:relative;
	top:0px;
	bottom:0px;
}



.tableWidget .scrollingContent{
	overflow-y:auto;
	overflow:-moz-scrollbars-vertical;
	width:100%;

}
</style>

<script type="text/javascript">
var tableWidget_tableCounter = 0;
var tableWidget_arraySort = new Array();
var tableWidget_okToSort = true;
var activeColumn = new Array();
var arrowImagePath = "imagens/";	// Path to arrow images
function addEndCol(obj)
{
	if(document.all)return;
	var rows = obj.getElementsByTagName('TR');
	for(var no=0;no<rows.length;no++){
		var cell = rows[no].insertCell(-1);
		cell.innerHTML = '&nbsp;';
		cell.style.width = '13px';
		cell.width = '13';

	}	
	
}

function highlightTableHeader()
{
	this.className='tableWigdet_headerCellOver';
	if(document.all){	// I.E fix for "jumping" headings
		var divObj = this.parentNode.parentNode.parentNode.parentNode;
		this.parentNode.style.top = divObj.scrollTop + 'px';

	}
		
}

function deHighlightTableHeader()
{
	this.className='tableWidget_headerCell';		
}

function mousedownTableHeader()
{
	this.className='tableWigdet_headerCellDown';
	if(document.all){	// I.E fix for "jumping" headings
		var divObj = this.parentNode.parentNode.parentNode.parentNode;
		this.parentNode.style.top = divObj.scrollTop + 'px';
	}		
}

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 cancelTableWidgetEvent()
{
	return false;
}

function sortTable()
{
	if(!tableWidget_okToSort)return;
	tableWidget_okToSort = false;
	/* Getting index of current column */
	var obj = this;
	var indexThis = 0;
	while(obj.previousSibling){
		obj = obj.previousSibling;
		if(obj.tagName=='TD')indexThis++;		
	}
	var images = this.getElementsByTagName('IMG');
	
	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';
	}
	
	
	
	if(direction=='descending'){
		images[0].style.display='inline';
		images[0].style.visibility='visible';
		images[1].style.display='none';
	}else{
		images[1].style.display='inline';
		images[1].style.visibility='visible';
		images[0].style.display='none';		
	}

	
	var tableObj = this.parentNode.parentNode.parentNode;
	var tBody = tableObj.getElementsByTagName('TBODY')[0];
	
	var widgetIndex = tableObj.id.replace(/[^\d]/g,'');
	var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String
	if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){
		var images = activeColumn[widgetIndex].getElementsByTagName('IMG');
		images[0].style.display='none';
		images[1].style.display='inline';
		images[1].style.visibility = 'hidden';
		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 initTableWidget(objId,width,height,sortArray)
{
	width = width + '';
	height = height + '';
	var obj = document.getElementById(objId);
	obj.parentNode.className='widget_tableDiv';
	if(navigator.userAgent.indexOf('MSIE')>=0){
		obj.parentNode.style.overflowY = 'auto';
	}
	tableWidget_arraySort[tableWidget_tableCounter] = sortArray;
	if(width.indexOf('%')>=0){
		obj.style.width = width;
		obj.parentNode.style.width = width;
	}else{
		obj.style.width = width + 'px';
		obj.parentNode.style.width = width + 'px';
	}
	
	if(height.indexOf('%')>=0){

		obj.parentNode.style.height = height;			
		
	}else{

		obj.parentNode.style.height = height + 'px';
	}
	obj.id = 'tableWidget' + tableWidget_tableCounter;
	addEndCol(obj);
	
	obj.cellSpacing = 0;
	obj.cellPadding = 0;
	obj.className='tableWidget';
	var tHead = obj.getElementsByTagName('THEAD')[0];
	var cells = tHead.getElementsByTagName('TD');
	for(var no=0;no<cells.length;no++){
		cells[no].className = 'tableWidget_headerCell';
		cells[no].onselectstart = cancelTableWidgetEvent;
		if(no==cells.length-1){
			cells[no].style.borderRight = '0px';	
		}
		if(sortArray[no]){
			cells[no].onmouseover = highlightTableHeader;
			cells[no].onmouseout =  deHighlightTableHeader;
			cells[no].onmousedown = mousedownTableHeader;		
			cells[no].onmouseup = highlightTableHeader;		
			cells[no].onclick = sortTable;	
			
			var img = document.createElement('IMG');
			img.src = arrowImagePath + 'seta_up.gif';
			cells[no].appendChild(img);	
			img.style.visibility = 'hidden';
			
			var img = document.createElement('IMG');
			img.src = arrowImagePath + 'seta_down.gif';
			cells[no].appendChild(img);	
			img.style.display = 'none';
			
			
		}else{
			cells[no].style.cursor = 'default';	
		}
		
		
	}		
	var tBody = obj.getElementsByTagName('TBODY')[0];
	if(document.all && navigator.userAgent.indexOf('Opera')<0){
		tBody.className='scrollingContent';
		tBody.style.display='block';			
	}else{
		tBody.className='scrollingContent';
		tBody.style.height = (obj.parentNode.clientHeight-tHead.offsetHeight) + 'px';
		if(navigator.userAgent.indexOf('Opera')>=0){
			obj.parentNode.style.overflow = 'auto';
		}
	}
	
	for(var no=1;no<obj.rows.length;no++){
		obj.rows[no].onmouseover = highlightDataRow;
		obj.rows[no].onmouseout = deHighlightDataRow;
		for(var no2=0;no2<sortArray.length;no2++){	/* Right align numeric cells */
			if(sortArray[no2] && sortArray[no2]=='N')obj.rows[no].cells[no2].style.textAlign='right';
		}
	}
	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='right';
	}		
	
	tableWidget_tableCounter++;
}

function highlightDataRow()
{
	if(navigator.userAgent.indexOf('Opera')>=0)return;
	this.className='tableWidget_dataRollOver';
	if(document.all){	// I.E fix for "jumping" headings
		var divObj = this.parentNode.parentNode.parentNode;
		var tHead = divObj.getElementsByTagName('TR')[0];
		tHead.style.top = divObj.scrollTop + 'px';
		
	}	
}

function deHighlightDataRow()
{
	if(navigator.userAgent.indexOf('Opera')>=0)return;
	this.className=null;
	if(document.all){	// I.E fix for "jumping" headings
		var divObj = this.parentNode.parentNode.parentNode;
		var tHead = divObj.getElementsByTagName('TR')[0];
		tHead.style.top = divObj.scrollTop + 'px';
	}			
}

</script>
</head>
<body>
<div class="widget_tableDiv">
<table id="myTable">
	<thead>
		<tr>
			<td>Nome</td>
			<td>Idade</td>
			<td>Cargo</td>
			<td>Salário</td>
			<td>Sexo</td>
		</tr>
	</thead>
	<tbody class="scrollingContent">
		<tr>
			<td>João</td>
			<td>37</td>
			<td>Diretor</td>
			<td>90.000</td>
			<td>M</td>
		</tr>
		<tr>
			<td>Susana</td>
			<td>34</td>
			<td>Secretária</td>
			<td>1.000</td>
			<td>F</td>
		</tr>
		<tr>
			<td>David</td>
			<td>29</td>
			<td>Chefe de Produção</td>
			<td>10.000</td>
			<td>M</td>
		</tr>
		<tr>
			<td>Laura</td>
			<td>29</td>
			<td>Gerente de RH</td>
			<td>30.000</td>
			<td>F</td>
		</tr>	
	</tbody>
</table>
</div>
<script type="text/javascript">
// Calling function that creates the table widget
// Input parameters: 
//	* id of table
//	* width of table(examples: 500, 99%)
//	* Height of table 
//  * Array of sortable columns ('S' = String, 'N' = numeric, false = no sort )
initTableWidget('myTable',600,150,Array('S','N',false,'N','S'));
</script>
</body>
</html>

ArquivoTipoTamanhoHits 
ordenar.zipArquivo ZIP7 Kb651Baixar o Arquivo
Sim   Não   Este código foi útil para você?
NotaComentário
10
denunciar
chronolock comentou em 16/6/2008

Muito bom

Meu amigo,
muito bom esse codigo,
bom trabalho.
Regras:
Os comentários seguem as seguintes regras:
  • Todos os comentários são enviados por membros cadastrados no site.
  • A pontuação de comentários de conteúdo do próprio membro não serão computados.
  • Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
  • Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
  • O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
  • Há um limite de 10 comentários por dia para cada membro.
  • Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

     (ainda não tem cadastro? clique aqui!)

Máximo de 30 caracteres

Máximo de 255 caracteres
 

R&W Consulting - Soluções Web Hospedagem UOL HOST PagSeguro - solução para pagamentos online
© 2006-2009 R&W Informática Ltda. - Todos os direitos reservados.