我的表中没有启用排序

时间:2014-04-04 10:26:38

标签: css jquery-mobile

我更新了下面的代码,无法对表进行排序。 我试过了tablersorter,但那没有帮助

请解决问题。

这是链接:jsfiddle.net/BKgue/224 /

我已更新以下代码。

我的代码:

<head>
<title>Untitled Document</title>
<body>
<link rel="stylesheet" href="../../Downloads/mine/jQueryMobile_resources/jquery.mobile-1.3.0.min.css" type="text/css">
<script type="text/javascript" src="../../Downloads/mine/jQueryMobile_resources/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="../../Downloads/mine/jQueryMobile_resources/jquery.mobile-1.3.0.min.js"></script> 


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


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

</script>


</head>
                         <table data-role="table" id="table-column-toggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" >
                         <thead>
                           <tr>
                             <th data-priority="1">
                                 <label>
                                     <input type="checkbox" name="checkbox-0 "/>
                                 </label>
                             </th>
                             <th data-priority="2">CUSTOMER</th>
                             <th data-priority="3">SUBJECT</th>
                             <th data-priority="4">STATUS</th>
                             <th data-priority="5">UPDATED</th>
                             <th data-priority="6">ASSIGNED</th>                         
                             <th data-priority="7">PRIORITY</th>
                           </tr>
                         </thead>

                         <tbody>                            


                                <tr>
                                 <td>
                                    <label>
                                        <input type="checkbox" name="checkbox-0 "/>
                                    </label>
                                </td>
                                 <td>Smith</td> 
                                <td>Sampletitme</td> 
                                <td>open</td> 
                                <td>Yes</td> 
                                <td>me</td> 
                                    <td>me</td> 
                               </tr>  

                                <tr>
                                 <td>
                                    <label>
                                        <input type="checkbox" name="checkbox-0 "/>
                                    </label>
                                </td>
                                 <td>Smith</td> 
                                <td>Sampletitme</td> 
                                <td>open</td> 
                                <td>Yes</td> 
                                <td>me</td> 
                                    <td>me</td> 
                               </tr>  

                                <tr>
                                 <td>
                                    <label>
                                        <input type="checkbox" name="checkbox-0 "/>
                                    </label>
                                </td>
                                 <td>Smith</td> 
                                <td>Sampletitme</td> 
                                <td>open</td> 
                                <td>Yes</td> 
                                <td>me</td> 
                                    <td>me</td> 
                               </tr>  

                        </tbody>

                    </table>

1 个答案:

答案 0 :(得分:0)

当使用tablesorter时,您是否在文档准备就绪时调用了?:

$(document).ready(function() 
   { 
      $("#myTable").tablesorter(); 
   } 
); 

取自:Tablesorter docs

编辑,在头部订购:

<link rel="stylesheet" href="../../Downloads/mine/jQueryMobile_resources/jquery.mobile-1.3.0.min.css" type="text/css">

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

<script type="text/javascript" src="../../Downloads/mine/jQueryMobile_resources/jquery-  1.9.1.min.js"></script> 
<script type="text/javascript" src="../../Downloads/mine/jQueryMobile_resources/jquery.mobile-1.3.0.min.js"></script> 

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


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

此处的顺序反映了库在浏览器中的加载顺序,因此必须在JQuery的任何插件之前加载JQuery