如何让用户能够对通过经典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""> </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"> </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>
答案 0 :(得分:3)
我强烈建议您使用TableSorter jQuery插件。
虽然你需要发送所有行,或者创建一个只输出表的JSON数据的新文件,然后使用TableSorter方法自动从JSON加载数据,你可以开箱即用。