• 使用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>

  • 相关阅读:
    web前端性能意义、关注重点、测试方案、优化技巧
    前端性能优化和规范
    高性能网站性能优化与系统架构(ZT)
    【转载】12306铁道部订票网站性能分析
    构架高性能WEB网站的几点知识
    减少图片HTTP 请求的方案
    网站性能优化:动态缩略图技术实现思路
    不错的jquery插件
    jQuery 遍历
    JavaScript slice() 方法
  • 原文地址:https://www.cnblogs.com/java20130726/p/3218424.html
Copyright © 2020-2023  润新知