使用jQuery 插件 tablesorter 的基本使用

 

<script type="text/javascript" src="script/jquery-1.4.2.min.js" ></script>

    <!-- 以下是使用tablesorter 进行排序 但分页不具有排序功能 -->

    <script type="text/javascript" src="script/tablesorter/jquery.metadata.js"></script>

    <script type="text/javascript" src="script/tablesorter/jquery.tablesorter.min.js"></script>

    <link rel="stylesheet" href="script/tablesorter/themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />

 

 

  <script type="text/javascript">

 $(document).ready(function(){

 $("#myTable").tablesorter(

{

headers: {3:{sorter: false}, 4:{sorter: false}}

}

);

 });

  </script>

注: 以上的js都需要引入

 

 

 <table id="myTable"   width="100%" border="0" cellpadding="1" cellspacing="1" class="tablesorter">

         <thead>

           <tr>

             <th>论文名称</th>

             <th>完成时间</th>

             <th>学生名</th>

             <th align="center">论文</th>

             <th align="center">附件</th>

           </tr>

           </thead>

<!-- 列表数据栏 -->

<tbody>

 

 

 <c:if test="${!empty pm.datas}">

         <c:forEach items="${pm.datas }" var="document">

           <tr>

             <td height="25" width="35%" align="left" valign="middle"  >

  <a href="actions/zdapproveingAction!documentInfo?document.id=${document.id}&studentId=${document.creator.person.id}" style="color: #3366CC;" >${document.title}</a>                 </td>

             <td height="25" align="left" valign="middle"  ><fmt:formatDate value="${document.createTime }" pattern="yyyy-MM-dd"/></td>

             <td height="25" align="left" valign="middle"  >${document.creator.person.name}</td>

             <td height="25" align="center" valign="middle"  >

 <c:if test="${!empty document.content }">

 <a href="actions/declareAction!download?filename=${document.content}" style="color: #3366CC;">下载查看</a>

 </c:if> 

 </td>

             <td height="25" align="center" valign="middle"  >

 <c:if test="${!empty document.otherContent}">

  <a href="actions/declareAction!download?filename=${document.otherContent}" style="color: #3366CC;">下载查看</a>

 </c:if>

 </td>

             </tr>

</c:forEach>

    </c:if>

 

</tbody>