Question

这是我的html表，jQuery表分类器对我不起作用：

<table id="pendingForDownldTable" class="table" cellspacing="1">
    <thead>
     <tr>
      <th width="2%"><input type="checkbox" name="" id="" /></th>
     <th width="10%">ECN No.</th>
     <th width="12%">CN Date</th>
    <th width="14%">Broker Name</th>
    <th width="14%">Security Name</th>
     <th width="4%">Quantity</th>

    <th width="5%">Trade Type</th>

   </tr>
   </thead>
   <tbody>
    <logic:notEmpty name="pendingDownloadForm" property="pendingForDownldECNList">
      <logic:iterate id="rows" name="pendingDownloadForm"                                                            

    <tr>
           <td><input type="checkbox" name="" id="" /></td>
               <td class="ecnNo"><a href=#                                                              


          </td>
            < td><bean:write name="rows" property="ecnDate" /></td>
           <td><bean:write name="rows" property="brokerName" /></td>
              <td><bean:write name="rows" property="companyName" /></td>
               <td><bean:write name="rows" property="quantity" /></td>
          <td id="mktType"><bean:write name="rows" property="mktType"  />
      </td>
         <td><bean:write name="rows" property="settlementNumber" /></td>
          <td><bean:write name="rows" property="schemeName" /></td>




          <td><bean:write name="rows" property="custodianName" /></td>
           <td><bean:write name="rows" property="signStatus" /></td>
             <td id="tradeType"><bean:write name="rows" property="tradeType" /></td>
          </tr>
         </logic:iterate>



          </logic:notEmpty>

            <logic:notEmpty name="pendingDownloadForm" property="equityCnList">

          <logic:iterate id="rows1" name="pendingDownloadForm" property="equityCnList" >

               <tr>
               <td><input type="checkbox" name="" id="" /></td>
             <td><a href=#                                                  


          </td>
          <td><bean:write name="rows1" property="ecnDate" /></td>
           <td><bean:write name="rows1" property="brokerName" /></td>
          <td><bean:write name="rows1" property="companyName" /></td>
        <td><bean:write name="rows1" property="quantity" /></td>
           <td><bean:write name="rows1" property="mktType" /></td>
        <td><bean:write name="rows1" property="settlementNumber" /></td>
           <td><bean:write name="rows1" property="schemeName" /></td>
           <td><bean:write name="rows1" property="custodianName" /></td>
          <td><bean:write name="rows1" property="signStatus" /></td>
      </tr>
     </logic:iterate>
       </logic:notEmpty>
         </tbody>
       </table>`

这是我的jQuery函数

<script type="text/javascript">
$(document).ready(function() 
{ 
    $("#pendingForDownldTable").tablesorter(); 
}); 
</script>

Answer 1

首先你有几个破坏的DOM元素，例如td和a标签，我打算缩进你的代码并发现它，这是非常重要的你关闭表标签。

//this is a no no
<td><a href=#                                                  


      </td>

第二次，如果您遇到样式问题答案是表缺少类tablesorter或css spritesheets，我们需要倾向于：

<!-- blue theme -->
<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css" type="text/css" media="print, projection, screen" />

完整HTML：

<table id="pendingForDownldTable" class="tablesorter" cellspacing="1">
<thead>
    <tr>
        <th width="2%">
            <input type="checkbox" name="" id="" />
        </th>
        <th width="10%">ECN No.</th>
        <th width="12%">CN Date</th>
        <th width="14%">Broker Name</th>
        <th width="14%">Security Name</th>
        <th width="4%">Quantity</th>
        <th width="5%">Trade Type</th>
    </tr>
</thead>
<tbody>
    <logic:notEmpty name="pendingDownloadForm" property="pendingForDownldECNList">
        <logic:iterate id="rows" name="pendingDownloadForm">
            <tr>
                <td>
                    <input type="checkbox" name="" id="" />
                </td>
                <td class="ecnNo"> <a href="#"></a> 
                </td>
                <td>
                    <bean:write name="rows" property="ecnDate" />1
                </td>
                <td>
                    <bean:write name="rows" property="brokerName" />test broker
                </td>
                <td>
                    <bean:write name="rows" property="companyName" />
                </td>
                <td>
                    <bean:write name="rows" property="quantity" />
                </td>
                <td id="mktType">
                    <bean:write name="rows" property="mktType" />
                </td>
                <td>
                    <bean:write name="rows" property="settlementNumber" />
                </td>
                <td>
                    <bean:write name="rows" property="schemeName" />
                </td>
                <td>
                    <bean:write name="rows" property="custodianName" />
                </td>
                <td>
                    <bean:write name="rows" property="signStatus" />
                </td>
                <td id="tradeType">
                    <bean:write name="rows" property="tradeType" />
                </td>
            </tr>
        </logic:iterate>
    </logic:notEmpty>
    <logic:notEmpty name="pendingDownloadForm" property="equityCnList">
        <logic:iterate id="rows1" name="pendingDownloadForm" property="equityCnList">
            <tr>
                <td>
                    <input type="checkbox" name="" id="" />
                </td>
                <td> <a href="#"></a> 
                </td>
                <td>
                    <bean:write name="rows1" property="ecnDate" />2
                </td>
                <td>
                    <bean:write name="rows1" property="brokerName" />broker test
                </td>
                <td>
                    <bean:write name="rows1" property="companyName" />
                </td>
                <td>
                    <bean:write name="rows1" property="quantity" />
                </td>
                <td>
                    <bean:write name="rows1" property="mktType" />
                </td>
                <td>
                    <bean:write name="rows1" property="settlementNumber" />
                </td>
                <td>
                    <bean:write name="rows1" property="schemeName" />
                </td>
                <td>
                    <bean:write name="rows1" property="custodianName" />
                </td>
                <td>
                    <bean:write name="rows1" property="signStatus" />
                </td>
            </tr>
        </logic:iterate>
    </logic:notEmpty>
</tbody>
</table>`

脚本部分与您已经拥有的相同，只是确保包含所有内容

完整的FIDDLE ：http://jsfiddle.net/Q6FLN/2/

jQuery表分类器不适合我

1 个答案: