Table Sorter for Classic ASP_问答_开发者_运维开发者技术经验分享

How would you go about giving the user the ability to sort through a table ascending and descending that has been produced through classic asp. If I could get a simple example or a guide that would help a lot.
I have the following code that I'm looking to improve:
<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
        res开发者_Go百科ponse.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>
I would strongly recommend that you would use TableSorter jQuery plugin.
You would have all out of the box, though you need to send all rows, or create a new file that only outputs the JSON data of the table and use the TableSorter methods to load data from JSON automatically.