本文介绍一种利用JavaScript在客户端实现表格数据排序的方法，特别适用于订单管理系统。通过前端脚本处理排序逻辑，避免了每次排序请求服务器进行ASP计算，从而提升页面响应速度与用户体验。
前端表格排序方案
分享一个在订单管理场景中常用且效果良好的JavaScript表格排序方案，该方案无需依赖ASP在服务器端重新计算数据。
表格结构与交互
<table width="100%" border="1" cellspacing="0" cellpadding="1" onclick="sortColumn(event)"> <thead> <tr> <td>序号</th> <td>名称</th> <td>金额</th> <td>数量</th> <td>日期 </th> <td>点击</th> </tr></thead> <tr> <td>1</td> <td>a</td> <td>1.26</td> <td>5</td> <td>2006-1-5</td> <td>321</td> </tr> <tr> <td>2</td> <td>e</td> <td>12.65</td> <td>6</td> <td>2006-10-4</td> <td>456</td> </tr> <tr> <td>3</td> <td>f</td> <td>21.03</td> <td>4</td> <td>2006-2-7</td> <td>122</td> </tr> <tr> <td>4</td> <td>g</td> <td>21.33</td> <td>3</td> <td>2006-8-9</td> <td>147</td> </tr> <tr> <td>5</td> <td>h</td> <td>12.21</td> <td>5</td> <td>2007-8-1</td> <td>1024</td> </tr> <tr> <td>6</td> <td>d</td> <td>14.36</td> <td>2</td> <td>2003-4-9</td> <td>99</td> </tr> <tr> <td>7</td> <td>a</td> <td>25.3</td> <td>3</td> <td>2006-10-4</td> <td>122</td> </tr> <tr> <td>8</td> <td>wd</td> <td>0.35</td> <td>44</td> <td>2008-10-25</td> <td>444</td> </tr> <tr> <td>9</td> <td>f</td> <td>12.1</td> <td>56</td> <td>2006-10-23</td> <td>123</td> </tr> <tr> <td>10</td> <td>w</td> <td>123.3</td> <td>12</td> <td>2005-5-7</td> <td>321</td> </tr> <tr> <td>11</td> <td>e</td> <td>654</td> <td>12</td> <td>2006-9-12</td> <td>99</td> </tr> <tr> <td>12</td> <td>t</td> <td>12.21</td> <td>13</td> <td>2007-7-3</td> <td>100</td> </tr> <tr> <td>13</td> <td>f</td> <td>12.64</td> <td>14</td> <td>2001-12-31</td> <td>32</td> </tr> </table>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
1
2下一页阅读全文