JS控制頁面表格內數據，按照條件排序

HTML 代碼以下：

<table border="0" cellpadding="7" cellspacing="1" class="common"
    id="billTable">
    <thead>
     <tr>
      <td class="top" style="text-align: left">
       序號
      </td>
      <td class="top">
       購買方名稱
      </td>            
      <td class="top">
       銷售方名稱
      </td>  
      <td class="top">
       號碼
      </td>
      <td class="top">
       代碼
      </td>
      <td class="top">
        類型
      </td>
      <td class="top">
        金額
      </td>
      <td class="top">
       稅率
      </td>
      <td class="top">
       稅額
      </td>
      <td class="top">
       價稅合計
      </td>
      <td class="top">
        審覈狀態
      </td>            
      <td class="top">
        認證狀態
      </td>            
      <td class="top">
       抵扣狀態
      </td>            
      <td class="top">
       登記時間
      </td>
     </tr>
    </thead> 
    <tbody>
    <c:forEach items="${saBillInfoList}" var='saBillInfo' varStatus="status">
     <tr>
      <td align="left" nowrap class="page">
       <input type="radio" name='checkboxSelect' value='${status.count}'/> 
       ${status.count}          
       <input type="hidden" name='id' value="${saBillInfo.id}" readonly="readonly"/>  
      </td>
      <td align="center" class="page">
       ${saBillInfo.buyerName}
       <input type="hidden" name='buyerName' value="${saBillInfo.buyerName}" readonly="readonly"/>  
      </td>
      <td align="center" class="page">
       ${saBillInfo.salerName}
       <input type="hidden" name='salerName' value="${saBillInfo.salerName}" readonly="readonly"/>  
      </td>
      <td align="center" class="page">
       ${saBillInfo.billCode}
       <input type="hidden" name='billCode' value="${saBillInfo.billCode}" readonly="readonly"/>  
      </td>
      <td align="center" class="page">
       ${saBillInfo.billNo}
       <input type="hidden" name='billNo' value="${saBillInfo.billNo}" readonly="readonly"/>  
      </td>
      <td align="center" class="page">
       <%-- 判斷 類型在頁面顯示--%>
       <c:choose>
         <c:when test="${saBillInfo.billType eq '01' }">  
              增值稅專用          </c:when>
         <c:when test="${saBillInfo.billType eq '02' }">  
              增值稅普通          </c:when>
         <c:when test="${saBillInfo.billType eq '03' }">  
              紅字增值稅專用          </c:when>
         <c:when test="${saBillInfo.billType eq '04' }">  
              紅字增值稅普通         </c:when>
       </c:choose>
       <input type="hidden" name='billType' value="${saBillInfo.billType}"/>       
      </td>
      <td align="center" class="page">
       ${saBillInfo.billAmount}
       <input type="hidden" name='billAmount' value="${saBillInfo.billAmount}" readonly="readonly"/>  
      </td>
      <td align="center" class="page">
       ${saBillInfo.taxRate}
       <input type="hidden" name='taxRate' value="${saBillInfo.taxRate}" readonly="readonly"/>  
      </td>
      <td align="center" class="page">
       ${saBillInfo.tax}
       <input type="hidden" name='tax' value="${saBillInfo.tax}" readonly="readonly"/>  
      </td>
      <td align="center" class="page">
       ${saBillInfo.total}
       <input type="hidden" name='total' value="${saBillInfo.total}" readonly="readonly"/>  
      </td>
      <td align="center" class="page">
      <%-- 判斷 在頁面顯示 審覈狀態 0：待審覈；1：審覈中；2：審覈經過；3：審覈不經過--%>
       <c:choose>
         <c:when test="${saBillInfo.verifyStatus eq '0' }">  
              待審覈
         </c:when>
         <c:when test="${saBillInfo.verifyStatus eq '1' }">  
              審覈中
         </c:when>
         <c:when test="${saBillInfo.verifyStatus eq '2' }">  
             審覈經過
         </c:when>
         <c:when test="${saBillInfo.verifyStatus eq '3' }">  
              審覈不經過
         </c:when>
       </c:choose>
       <input type="hidden" name='verifyStatus' value="${saBillInfo.verifyStatus}" readonly="readonly"/>  
      </td>      
      <td align="center" class="page">
      <%-- 判斷 在頁面顯示  認證狀態 0：未認證；1：認證經過；2：認證失敗--%>
       <c:choose>
         <c:when test="${saBillInfo.confirmStatus eq '0' }">  
              未認證
         </c:when>
         <c:when test="${saBillInfo.confirmStatus eq '1' }">  
             認證經過
         </c:when>
         <c:when test="${saBillInfo.confirmStatus eq '2' }">  
              認證失敗
         </c:when>
       </c:choose>
       <input type="hidden" name='confirmStatus' value="${saBillInfo.confirmStatus}" readonly="readonly"/>  
      </td>
      <td align="center" class="page">
      <%-- 判斷 在頁面顯示 抵扣狀態 0：未抵扣；1：已抵扣--%>
       <c:choose>
         <c:when test="${saBillInfo.creditStatus eq '0' }">  
              未抵扣
         </c:when>
         <c:when test="${saBillInfo.creditStatus eq '1' }">  
              已抵扣
         </c:when>         
       </c:choose>
       <input type="hidden" name='creditStatus' value="${saBillInfo.creditStatus}" readonly="readonly"/>  
      </td>
      <td align="center" class="page">
       ${saBillInfo.rigdate}
       <input type="hidden" name='rigdate' value="${saBillInfo.rigdate}" readonly="readonly"/>  
      </td>
     </tr>
    </c:forEach>
    </tbody>    
    <tfoot>
     <tr>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr align="center">
        <td style="background: #F7F7F7;">
         <input type="button" class="button" value="查看"
          onclick="submitQuery()" src="/sales/images/btnSave.gif"
          width="75" height="20" border="0"/>
        </td>       
        <td style="background: #F7F7F7;">
         <input type="button" class="button" value="修改"
          onclick="submitModify()" src="/sales/images/btnSave.gif"
          width="75" height="20" border="0"/>
        </td>
        <td style="background: #F7F7F7;">
         <input type="button" class="button" value="解綁"
          onclick="submitUnBund()" src="/sales/images/btnSave.gif"
          width="75" height="20" border="0"/>
        </td>
        <td style="background: #F7F7F7;">
         <input type="button" class="button" value="註銷"
          onclick="submitDelete()" src="/sales/images/btnSave.gif"
          width="75" height="20" border="0"/>
        </td>
       </tr>
      </table>
     </tr>
    </tfoot>
   </table>

JS代碼以下：

<script>
 var sortTable = new SortableTable(document.getElementById("billTable"),
 ["None", "Number", "Number","None","None","None","None","None","Number","Number","Number","Number","Number","Date"]);
</script>

注意：

    thead,tbody,tfoot 要按要求寫