TableSorter 插件和其他排序插件不起作用答案

【问题标题】：TableSorter Plugin and other Sorting Plugins not WorkingTableSorter 插件和其他排序插件不起作用
【发布时间】：2013-06-07 13:32:47
【问题描述】：

几个小时以来，我一直在尝试使用 tablesorter 插件 described here 对我的表进行排序。但是，我似乎无法弄清楚我做错了什么。我什至试图遵循给出的确切示例，但它对我不起作用。

我的代码如下所示：

<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>jsmith@gmail.com</td>
        <td>$50.00</td>
        <td>http://www.jsmith.com</td>
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td>fbach@yahoo.com</td>
        <td>$50.00</td>
        <td>http://www.frank.com</td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td>jdoe@hotmail.com</td>
        <td>$100.00</td>
        <td>http://www.jdoe.com</td>
    </tr>
    <tr>
        <td>Conway</td>
        <td>Tim</td>
        <td>tconway@earthlink.net</td>
        <td>$50.00</td>
        <td>http://www.timconway.com</td>
    </tr>
    </tbody>
    </table>

    </cfoutput>

我最初下载了文件并为src 指定了一个绝对路径，但这也不起作用。我正在尝试在 .cfm (ColdFusion) 文件中使用它。

关于发生了什么的任何意见？

【问题讨论】：

标签： jquery sorting coldfusion html-table tablesorter

【解决方案1】：

变化：

$("myTable").tablesorter();

对于

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

原因是您通过其 Id 选择元素，这需要在其前面的 #。

如果您想将tableSorter 插件应用到您的所有带有tablesorter 类的表，那么您可以这样做：

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

Demo here.

【讨论】：

抱歉，不是这样。我之前用英镑符号试过。在我粘贴代码之前它不小心被省略了。
@FZ 我的演示工作正常，它基于您的代码。你一定有不同的问题。如果您有 Google Chrome，请按 F12 并重新启动您的页面。然后点击“控制台”选项卡，看看你在那里看到了什么错误。
（因为一个burninate编辑将此线程推入活动列表......）FWIW，我在.cfm文件中运行来自OP的确切代码。添加单个 # 符号修复了它。会对此投赞成票，但显然我第一次已经这样做了；-)（FZ - 旁注，<cfoutput> 标签是不必要的，因为要评估的页面中没有 cfml 代码）

【解决方案2】：

通过移除 head 标签并重新排列 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>jsmith@gmail.com</td> 
        <td>$50.00</td> 
        <td>http://www.jsmith.com</td> 
    </tr> 
    <tr> 
        <td>Bach</td> 
        <td>Frank</td> 
        <td>fbach@yahoo.com</td> 
        <td>$50.00</td> 
        <td>http://www.frank.com</td> 
    </tr> 
    <tr> 
        <td>Doe</td> 
        <td>Jason</td> 
        <td>jdoe@hotmail.com</td> 
        <td>$100.00</td> 
        <td>http://www.jdoe.com</td> 
    </tr> 
    <tr> 
        <td>Conway</td> 
        <td>Tim</td> 
        <td>tconway@earthlink.net</td> 
        <td>$50.00</td> 
        <td>http://www.timconway.com</td> 
    </tr> 
    </tbody> 
    </table>  

    </cfoutput>

【讨论】：

【解决方案3】：

我有同样的问题。我通过添加下载中包含的 css 文件来修复它。注意：文档中的任何地方都没有提到这一点。

看起来需要的css文件是style.css和jq.css。

style.css 位于下载地址：

[根下载位置]/themes/[蓝色或绿色]/style.css
[根下载位置]/docs/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>

【讨论】：