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插件和其他排序插件无法正常工作

回答

相关问题