jQuery使用插件tablesorter实现纯前端表格排序

必要步骤

1.引入tablesorter插件

在HTML文件里加入：（注意，要先引入jquery）

<script src="../resources/home/js/jquery-1.11.3.js"></script>
<script src="../resources/home/js/jquery.tablesorter.js"></script>

2.为目标表格指定id或class

<table id="pro_list" class="tablesorter" >
        <thead>
          <tr>
            <th width="200px">客房</th>
            <th>房型</th>
            <th style="color:#DD4C40">可住人数（点击排序）</th>
            <th style="color:#DD4C40">床位数（点击排序）</th>
            <th style="color:#DD4C40">房价（点击排序）</th>
            <th>房态</th>
            <th>预订</th>
          </tr>
        </thead>
        <tbody >
        <c:forEach items="${roomTypeList }" var="roomType">
        <tr>
          <td><a href="#"><img src="${roomType.photo }" alt=""></a>
          </td>
          <td align="center">
            <p>${roomType.name }</p>
            <p class="sub_txt">${roomType.remark }</p>
          </td>
          <td>${roomType.liveNum }</td>
          <td>${roomType.bedNum }</td>
          <td>${roomType.price }</td>
          <td>
          	<c:if test="${roomType.status == 0 }">
          		已满房
          	</c:if>
          	<c:if test="${roomType.status == 1 }">
          		可预订
          	</c:if>
          </td>
          <td>
          	<c:if test="${roomType.status == 0 }">
          		<input type="button" class="disable" value="满房" >
          	</c:if>
          	<c:if test="${roomType.status == 1 }">
          		<input type="button" value="预订" onclick="window.location.href='account/book_order?roomTypeId=${roomType.id }'" >
          	</c:if>
          </td>
        </tr>
		</c:forEach>
        </tbody>
      </table>

3.目标表格调用排序方法

如果步骤2中表格指定id，使用“#”
如果步骤2中表格指定class，使用“.”

<script type="text/javascript">
$("#pro_list").tablesorter({ 
    headers: { 
        // 列序号默认从0开始
        0: { 
            // 第1列不可排序 
            sorter: false 
        }, 
        1: { 
            sorter: false 
        }, 
        5: { 
            sorter: false 
        }, 
        6: { 
            sorter: false 
        } 
     }
} );
</script>

箭头图标

用到的图片资源：
bg.gif

asc.gif

des.gif

在html文件里引入style.css文件：

<link href="../resources/home/css/style.css" rel="Stylesheet" />

style.css:

table.tablesorter{
    font-family: arial;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}
/*表头的样式*/
thead{
background:#ccc;
color:#ff0000;
}
.header{
    background-image: url('../images/bg.gif');
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}s
/*降序时样式*/
th.headerSortDown{
 color:#00ff00;
 background-color: #aaa;
 background-image: url('../images/desc.gif');
 background-repeat: no-repeat;
 background-position: center right;
 cursor: pointer;
}

/*升序时样式*/
th.headerSortUp{
 color:#0000ff;
  background-color: #aaa;
 background-image: url('../images/asc.gif');
 background-repeat: no-repeat;
 background-position: center right;
 cursor: pointer;
}

参考文章：
可能在动态更新，中文排序等情况会出现问题，以下文章可解决
tablesorter多种情况处理1
tablesorter多种情况处理2