TableSorter插件和其他排序插件無法正常工作

我一直在嘗試使用tablesorter插件described here對我的表執行排序，現在幾個小時。但是，我似乎無法弄清楚我做錯了什麼。我甚至試圖按照給出的確切例子，但它不適合我。TableSorter插件和其他排序插件無法正常工作

這裏是我的代碼如下所示：

<head> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script> 

<script type="text/javascript"> 
     $(document).ready(function() 
      { 
       $("myTable").tablesorter(); 
      } 
     ); 
</script> 
</head> 
<body> 
    <cfoutput> 
    <table id="myTable" class="tablesorter"> 
    <thead> 
    <tr> 
     <th>Last Name</th> 
     <th>First Name</th> 
     <th>Email</th> 
     <th>Due</th> 
     <th>Web Site</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Smith</td> 
     <td>John</td> 
     <td>[email protected]</td> 
     <td>$50.00</td> 
     <td>http://www.jsmith.com</td> 
    </tr> 
    <tr> 
     <td>Bach</td> 
     <td>Frank</td> 
     <td>[email protected]</td> 
     <td>$50.00</td> 
     <td>http://www.frank.com</td> 
    </tr> 
    <tr> 
     <td>Doe</td> 
     <td>Jason</td> 
     <td>[email protected]</td> 
     <td>$100.00</td> 
     <td>http://www.jdoe.com</td> 
    </tr> 
    <tr> 
     <td>Conway</td> 
     <td>Tim</td> 
     <td>[email protected]</td> 
     <td>$50.00</td> 
     <td>http://www.timconway.com</td> 
    </tr> 
    </tbody> 
    </table> 

    </cfoutput>

我原來下載的文件，並指定一個絕對路徑src，但也不能工作。我試圖在.cfm（ColdFusion）文件中使用它。

關於發生了什麼的任何輸入？

來源

2013-06-11 F Z

變化：

$("myTable").tablesorter();

對於

$("#myTable").tablesorter();

其原因是是，你是通過其ID，這就需要在它前面的#選擇的元素。

如果你想在tableSorter插件適用於所有的表與類tablesorter那麼你可以這樣做：

$(".tablesorter").tablesorter(); //now you are selecting by class and not by Id

Demo here.

來源

2013-06-11 15:58:48 Icarus

抱歉，這不是它。我之前用英鎊符號試了一下。我在粘貼代碼之前意外忽略了它。 –

@FZ我的演示效果很好，它基於你的代碼。你必須有一個不同的問題。如果您使用Google Chrome，請按F12並重新啓動您的頁面。然後點擊「控制檯」選項卡，查看您在那裏看到的錯誤。 – Icarus

（由於burninate編輯將此線程推入活動列表...）FWIW，我在OP中運行了.cfm文件中的確切代碼。添加單個'＃'符號修復了它。會投這個，但顯然我已經做了第一次;-)（FZ - 注意，''標記是不必要的，因爲在頁面中沒有cfml代碼被評估） – Leigh

在某種程度上解決了通過移除頭部標籤和重新排列CFOUTPUT標籤：

<cfoutput> 

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

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

    <table id="myTable" class="tablesorter"> 
    <thead> 
    <tr> 
     <th>Last Name</th> 
     <th>First Name</th> 
     <th>Email</th> 
     <th>Due</th> 
     <th>Web Site</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Smith</td> 
     <td>John</td> 
     <td>[email protected]</td> 
     <td>$50.00</td> 
     <td>http://www.jsmith.com</td> 
    </tr> 
    <tr> 
     <td>Bach</td> 
     <td>Frank</td> 
     <td>[email protected]</td> 
     <td>$50.00</td> 
     <td>http://www.frank.com</td> 
    </tr> 
    <tr> 
     <td>Doe</td> 
     <td>Jason</td> 
     <td>[email protected]</td> 
     <td>$100.00</td> 
     <td>http://www.jdoe.com</td> 
    </tr> 
    <tr> 
     <td>Conway</td> 
     <td>Tim</td> 
     <td>[email protected]</td> 
     <td>$50.00</td> 
     <td>http://www.timconway.com</td> 
    </tr> 
    </tbody> 
    </table> 

    </cfoutput>

來源

2013-06-11 17:14:22

我有同樣的問題。我通過添加下載中包含的css文件來修復它。注意：這在文檔中沒有提及。

它看起來像所需的CSS文件是style.css和jq.css。

的style.css位於下載：

[根下載位置] /主題/ [藍色或綠色] /style.css
[根下載位置] /文檔/ CSS /jq.css

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<title>Population 2000 to 2010</title> 
<meta charset="utf-8" /> 
<script src="//code.jquery.com/jquery-1.11.2.js"></script> 
<script src="js/jquery.tablesorter.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#data-table").tablesorter(); 
    }); 
</script> 
<link rel="stylesheet" href="css/jq.css"> 
<link rel="stylesheet" href="css/style.css"> 

</head> 
<body> 
<h1>Population Change from 2000 to 2010</h1> 
<table id="data-table"> 
    <caption> 
    Ranking Tables for States: Population Change from 2000 to 2010 
    </caption> 
    <thead> 
    <tr> 
     <th>State</th> 
     <th>2000 population</th> 
     <th>2010 population</th> 
     <th>Numeric Change</th> 
     <th>Percent Change</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>California</td> 
     <td>33871648</td> 
     <td>37253956</td> 
     <td>3382308</td> 
     <td>10.0</td> 
    </tr> 
    <tr> 
     <td>Texas</td> 
     <td>20851820</td> 
     <td>25145561</td> 
     <td>4293741</td> 
     <td>20.6</td> 
    </tr> 
    <tr> 
     <td>New York</td> 
     <td>18976457</td> 
     <td>19378102</td> 
     <td>401645</td> 
     <td>2.1</td> 
    </tr> 
    <tr> 
     <td>Wyoming</td> 
     <td>493782</td> 
     <td>563626</td> 
     <td>69844</td> 
     <td>14.1</td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

來源

2015-04-12 02:43:33

TableSorter插件和其他排序插件無法正常工作

回答

相關問題