css - 我的表中未启用排序

标签 css jquery-mobile

我已经更新了下面 fiddle 中的代码,无法对表格进行排序。 我已经尝试过 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>

最佳答案

当使用 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(); 
    } 
  ); 

这里的顺序反射(reflect)了库在浏览器中加载的顺序,因此 JQuery 必须在任何 JQuery 插件之前加载

关于css - 我的表中未启用排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22860173/

相关文章:

javascript - 什么时候不在 html/css/javascript 的命名约定中使用连字符?

css - 如何处理二维矩阵中的无穷大

jquery移动点击事件?

javascript - 在 Datebox 插件中显示周数

javascript - jQuery 手机 : Multi-Page Application with Separate Pages: Second Page not Getting Styled

带偏移量的 CSS div 边框

html - 如何将网页上的两个图标并排对齐?

javascript - 如何清除:target choice?

html - 将图像放在另一个 div 内的 div 的右下角

javascript - Jquery 移动弹出窗口不会在提交表单时打开