Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 341
  • Last Modified:

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
0
hidrau
Asked:
hidrau
  • 4
  • 4
1 Solution
 
hidrauAuthor Commented:
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

0
 
hieloCommented:
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>
0
 
hieloCommented:

<%@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

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
hidrauAuthor Commented:
it didn't work :(

0
 
hidrauAuthor Commented:
do me a favor, can you build an example so that I can follow it.
0
 
hieloCommented:
>>it didn't work :(
You need to specify a height for the table. If the overall table height exceed what you specify (to the plugin), then you will see the scroll bars on the table.  Also, within the <thead> you need <th>, NOT <td>. Fix lines 33-53 of my previous post so that it has <th>.

Below is the js you need (assuming you have <table id="table1">...</table>) :
<script type="text/javascript" src="Bibli/js/jquery-1.5.js"></script>
<script type="text/javascript" src="Bibli/fixHeadTable/jquery.fixedheadertable.js"></script>
<script type="text/javascript">
$(function(){
	$('#table1').fixedHeaderTable({ height:300,autoShow:true});
});
</script>

Open in new window

0
 
hieloCommented:
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

0
 
hidrauAuthor Commented:
thanks very much
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now