2011-07-05 21 views
0

クラシックASPを使用して作成された昇順と降順の表を並べ替える機能をユーザーに与える方法を教えてください。私が簡単な例や、多くの助けになるガイドを得ることができたら。クラシックASPのテーブルソーター

<body onmousedown="browser()" onkeydown="return checkCtrlIns(this)"> 
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td class="scans-cell" valign="top"> 
<% 
'response.Write tmpRows(0) 
tmpHd1 = split(tmpRows(0),"=") 
hdVals = split(tmpHd1(1),":") 
howManyCols = Ubound(hdVals)+1 
Redim dstrVals(howManyCols-2,41) 

For k = 0 to howManyCols-3 
    dstrVals(k,41) = 0 
Next 

tblWidth = 244+((howManyCols-2)*41) '10col 563px 
%> 
<div id="head-wide" style="width:<%=tblWidth%>px;"> 
<table border="0" cellspacing="0" cellpadding="2" align="left" style="position:relative; bottom:-3px; left:0px;"> 
<tr> 
<% 
For i = 0 to Ubound(hdVals) 
    if i = 0 then 
     response.Write "<td class=""symbollng"" valign=""bottom"" style=""border-right:0px; border-left:0px;"">" & hdVals(i) & "</td>" & vbnewline 
    elseif i = 1 then 
     response.Write "<td class=""close-hd"" valign=""bottom"">" & hdVals(i) & "</td>" & vbnewline 
    else 
     dstrVals(i-2,0) = hdVals(i) 
     response.Write "<td class=""col-hd-wd"" valign=""bottom"">" & hdVals(i) & "</td>" & vbnewline 
    end if 
Next 
%> 
</tr> 
</table> 
</div> 
<div id="wrapper"> 
<div id="content"> 

<div id="pane" class="scroll-pane-wide" style="width:<%=tblWidth%>px;"> 
<table border="0" cellspacing="0" cellpadding="2" align="left"> 
<% 
EO = "odd" 
For i = 1 to Ubound(tmpRows)-1 
    if EO = "odd" then 
     response.Write "<tr class=""grey"">" & vbnewline 
    else 
     response.Write "<tr>" & vbnewline 
    end if 
    tmpRowVals1 = split(tmpRows(i),"=") 
    tmpRowVals = split(tmpRowVals1(1),":") 
    For j = 0 to Ubound(tmpRowVals) 
     if j = 0 then 
      response.Write "<td class=""symbollng""><span title=""" & tmpRowVals(j) & """>" & tmpRowVals(j) & "</span></td>" & vbnewline 
     elseif j = 1 then 
      if trim(tmpRowVals(j)) = "" then 
       response.Write "<td class=""close"">&nbsp;</td>" & vbnewline 
      else 
       response.Write "<td class=""close""><span title=""" & tmpRowVals(j) & """>" & tmpRowVals(j) & "</span></td>" & vbnewline 
      end if 
     else 
      Call addToDistChart(j-2,tmpRowVals(j)) 
      gTime = hdVals(j) 
      response.Write getCellColorWithClick(curlv(tmpRowVals(j)),tmpRowVals(0),gSec,gChar,gTime) 
     end if 
    Next 
    response.Write "</tr>" & vbnewline 
    if EO = "odd" then 
     EO = "even" 
    else 
     EO = "odd" 
    end if 
Next 
%></table> 
</div> 

</div> 
</div> 

</td> 
<td class="div-cell">&nbsp;</td> 
<td class="dist-cell"> 
<div id="dist-header"> 
<h2 id="scanName">Indicator Distribution</h2> 
</div> 
<div id="dist-wrapper"> 
<div id="dist-content"> 
<div id="dist-sym"> 


<% 
For i = 0 to howManyCols-3 
    if dstrVals(i,31) = "" AND dstrVals(i,32) = "" AND dstrVals(i,33) = "" AND dstrVals(i,34) = "" AND dstrVals(i,35) = "" AND dstrVals(i,36) = "" AND dstrVals(i,37) = "" AND dstrVals(i,38) = "" AND dstrVals(i,39) = "" AND dstrVals(i,40) = "" then 
%> 
<div id="dist-cell"> 
<table border="0" cellspacing="0" cellpadding="0" class="results" align="left"> 
    <tr> 
    <td colspan="30" class="dist-ttl"><h3><%=study%> | <%=addMinHd(dstrVals(i,0))%></h3></td> 
    </tr> 
    <tr> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,1)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,1)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,2)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,2)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,3)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,3)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,4)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,4)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,5)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,5)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,6)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,6)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,7)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,7)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,8)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,8)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,9)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,9)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,10)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,10)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,11)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,11)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,12)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,12)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,13)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,13)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,14)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,14)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,15)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,15)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,16)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,16)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,17)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,17)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,18)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,18)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,19)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,19)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,20)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,20)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,21)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,21)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,22)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,22)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,23)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,23)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,24)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,24)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,25)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,25)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,26)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,26)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,27)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,27)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,28)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,28)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,29)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,29)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,30)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,30)%>" align="left"></div></td> 
    </tr> 
    <tr> 
    <td colspan="2" class="res">1</td> 
    <td colspan="2" class="res">2</td> 
    <td colspan="2" class="res">3</td> 
    <td colspan="2" class="res">4</td> 
    <td colspan="2" class="res">5</td> 
    <td colspan="2" class="res">6</td> 
    <td colspan="2" class="res">7</td> 
    <td colspan="2" class="res">8</td> 
    <td colspan="2" class="res">9</td> 
    <td colspan="2" class="res">10</td> 
    <td colspan="2" class="res">11</td> 
    <td colspan="2" class="res">12</td> 
    <td colspan="2" class="res">12+</td> 
    <td colspan="2" class="res">13</td> 
    <td colspan="2" class="res">>13</td> 
    </tr> 
</table> 
</div> 
<% 
    else 
%> 
<div id="dist-cell"> 
<table border="0" cellspacing="0" cellpadding="0" class="results" align="left"> 
    <tr> 
    <td colspan="24" class="dist-ttl"><h3><%=study%> | <%=addMinHd(dstrVals(i,0))%></h3></td> 
    </tr> 
    <tr> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,1)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,1)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,2)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,2)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,3)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,3)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,4)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,4)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,5)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,5)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,6)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,6)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,7)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,7)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,8)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,8)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,9)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,9)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,10)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,10)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,11)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,11)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,12)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,12)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,13)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,13)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,14)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,14)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,31)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,31)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,32)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,32)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,33)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,33)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,34)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,34)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,35)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,35)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,36)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,36)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,37)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,37)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,38)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,38)%>" align="left"></div></td> 
    <td class="barrt" valign="bottom"><div class="grn-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,39)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,39)%>" align="right"></div></td> 
    <td class="barlt" valign="bottom"><div class="red-bar" style="height:<%=getPercInt(getCleanInt(dstrVals(i,40)),dstrVals(i,41))%>%;" title="<%=dstrVals(i,40)%>" align="left"></div></td> 
    </tr> 
    <tr> 
    <td colspan="2" class="res">1</td> 
    <td colspan="2" class="res">2</td> 
    <td colspan="2" class="res">3</td> 
    <td colspan="2" class="res">4</td> 
    <td colspan="2" class="res">5</td> 
    <td colspan="2" class="res">6</td> 
    <td colspan="2" class="res">7</td> 
    <td colspan="2" class="res">IM 8</td> 
    <td colspan="2" class="res">P 8</td> 
    <td colspan="2" class="res">IM 9</td> 
    <td colspan="2" class="res">P* 9</td> 
    <td colspan="2" class="res">P 9</td> 
    </tr> 
</table> 
</div> 


<% 
    end if 
Next 
%> 


</div> 
</div> 
</div> 
</td> 
</tr> 
</table> 
</body> 
</html> 

答えて

3

私は強くあなたがTableSorter jQueryプラグインを使用することをお勧めします:

は、私が改善しているよ、次のコードを持っています。

すべての行を送信するか、テーブルのJSONデータのみを出力する新しいファイルを作成し、TableSorterメソッドを使用してJSONから自動的にデータをロードする必要があります。

+0

これはまさに私が感謝のために探していたものです:) – Novazero

+0

私はこれを試しました。私はテーブルを埋めるためにストアの手順を使用しています。 と私のために働いていない。 パーサーの設定にエラーが発生しました。 私を助けることができますか? –