Link to home
Start Free TrialLog in
Avatar of hidrau
hidrauFlag for Brazil

asked on

I need a help to create an simple example using this pluggin in Jquery

Hello guys

I downloaded this example to fix the head table and I didn't understand very well how to make it work, I need a help

http://fixedheadertable.com/

thanks
Alex
Avatar of hidrau
hidrau
Flag of Brazil image

ASKER

I have this code made to try it
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="Bibli/js/jquery-1.5.js"></script>
<script type="text/javascript" src="Bibli/fixHeadTable/jquery.fixedheadertable.js"></script>


<style type="text/css" media="screen">
<!--
.tableG {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #FFF,  #CCC); /* for firefox 3.6+ */ 
} 
.tableG1 {background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #FFF,  #CCC); /* for firefox 3.6+ */ 
}

-->
</style>
</head>

<body>
<table width="1300" height="49" border="1" cellpadding="0" cellspacing="0" style="font-size:12px" >
  <thead class="tableG" >
  <tr >
    <td height="25" colspan="4" align="center">Indicadores</td>
    <td colspan="3" align="center">Datas</td>
    <td width="271" rowspan="2" align="center" valign="middle">Solicitante</td>
    <td width="138" rowspan="2" align="center" valign="middle">Tipo de Solicitação</td>
    <td width="142" rowspan="2" align="center" valign="middle">Descrição da Solicitação</td>
    <td colspan="3" align="center" valign="middle">Quadro Informativo</td>
    <td width="101" rowspan="2" align="center" valign="middle">Aprovador</td>
    <td width="101" rowspan="2" align="center" valign="middle">executor</td>
  </tr>
  <tr >
    <td width="21" align="center">&nbsp;</td>
    <td width="41" align="center">ID</td>
    <td width="34" align="center">MSG</td>
    <td width="21" align="center">&nbsp;</td>
    <td width="76" align="center">Solicitação</td>
    <td width="76" align="center">Previsão</td>
    <td width="76" align="center">Finalizado</td>
    <td width="62" align="center" valign="middle">Situação</td>
    <td width="69" align="center" valign="middle">Evolução</td>
    <td width="71" align="center" valign="middle">Prioridade</td>
  </tr>
  </thead>
  <tbody>
    <% call fazlinhas%>
  </tbody>
</table>
</body>
</html>

<%
sub fazLinhas
  for i = 0 to 100 
		%>
  <tr >
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center" valign="middle" bgcolor="#FFFFFF">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
  </tr>
  <%
  next
End Sub
%>

Open in new window

Avatar of hielo
In <THEAD> put ONE row (<tr>) only. You can have as many cells, but put only one row.

If you need a static "header" at the bottom of the table, then put ONE row of "headers" in the <tfoot>.  All the data should be in <tbody>

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="Bibli/js/jquery-1.5.js"></script>
<script type="text/javascript" src="Bibli/fixHeadTable/jquery.fixedheadertable.js"></script>


<style type="text/css" media="screen">
<!--
.tableG {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #FFF,  #CCC); /* for firefox 3.6+ */ 
} 
.tableG1 {background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #FFF,  #CCC); /* for firefox 3.6+ */ 
}

-->
</style>
</head>

<body>
<table width="1300" height="49" border="1" cellpadding="0" cellspacing="0" style="font-size:12px" >
  <thead class="tableG" >
  <tr >
    <td align="center">Indicadores</td>
    <td align="center">Datas</td>
    <td align="center" valign="middle">Solicitante</td>
    <td align="center" valign="middle">Tipo de Solicitação</td>
    <td align="center" valign="middle">Descrição da Solicitação</td>

    <td align="center" valign="middle">Quadro Informativo</td>
    <td align="center" valign="middle">Aprovador</td>
    <td align="center" valign="middle">executor</td>
    <td align="center">&nbsp;</td>
    <td align="center">ID</td>

    <td align="center">MSG</td>
    <td align="center">&nbsp;</td>
    <td align="center">Solicitação</td>
    <td align="center">Previsão</td>
    <td align="center">Finalizado</td>

    <td align="center" valign="middle">Situação</td>
    <td align="center" valign="middle">Evolução</td>
    <td align="center" valign="middle">Prioridade</td>
  </tr>
  </thead>
  <tbody>
    <% call fazlinhas%>
  </tbody>
<!-- IF you want the headers to also appear at the bottom uncomment the tfoot below -->
<!-- 
  <tfoot>
  <tr >
    <td align="center">Indicadores</td>
    <td align="center">Datas</td>
    <td align="center" valign="middle">Solicitante</td>
    <td align="center" valign="middle">Tipo de Solicitação</td>
    <td align="center" valign="middle">Descrição da Solicitação</td>

    <td align="center" valign="middle">Quadro Informativo</td>
    <td align="center" valign="middle">Aprovador</td>
    <td align="center" valign="middle">executor</td>
    <td align="center">&nbsp;</td>
    <td align="center">ID</td>

    <td align="center">MSG</td>
    <td align="center">&nbsp;</td>
    <td align="center">Solicitação</td>
    <td align="center">Previsão</td>
    <td align="center">Finalizado</td>

    <td align="center" valign="middle">Situação</td>
    <td align="center" valign="middle">Evolução</td>
    <td align="center" valign="middle">Prioridade</td>
  </tr>
  </tfoot>
 -->
 </table>
</body>
</html>

<%
sub fazLinhas
  for i = 0 to 100 
		%>
  <tr>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
	
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center" valign="middle" bgcolor="#FFFFFF">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
	
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>

    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>
    <td align="center" valign="middle">&nbsp;</td>

  </tr>
  <%
  next
End Sub
%>

Open in new window

Avatar of hidrau

ASKER

it didn't work :(

Avatar of hidrau

ASKER

do me a favor, can you build an example so that I can follow it.
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
BTW: If you need the headers to ALSO appear at the bottom of the table, use:

$('#table1').fixedHeaderTable({ height:500, autoShow:true, cloneHeadToFoot: true, footer:true});

Open in new window

Avatar of hidrau

ASKER

thanks very much