Jquery TableSorter插件和其他排序插件不工作_Jquery_Sorting_Coldfusion_Html Table_Tablesorter

Jquery TableSorter插件和其他排序插件不工作

jquery sorting coldfusion

Jquery TableSorter插件和其他排序插件不工作,jquery,sorting,coldfusion,html-table,tablesorter,Jquery,Sorting,Coldfusion,Html Table,Tablesorter,几个小时以来，我一直在尝试使用tablesorter插件在我的表中实现排序。然而，我似乎不知道我做错了什么。我甚至试着按照给出的例子来做，但这对我来说不起作用下面是我的代码的样子： <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://

几个小时以来，我一直在尝试使用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>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>


$（文档）.ready（函数（）
{ 
$（“myTable”）.tablesorter（）；
} 
); 
姓
名字
电子邮件
应得的
网站
史密斯
约翰
jsmith@gmail.com
$50.00
http://www.jsmith.com
巴赫
直率的
fbach@yahoo.com
$50.00
http://www.frank.com
雌鹿
杰森
jdoe@hotmail.com
$100.00
http://www.jdoe.com
康威
提姆
tconway@earthlink.net
$50.00
http://www.timconway.com

我最初下载了该文件，并为

src

指定了一个绝对路径，但这也不起作用。我试图在.cfm（ColdFusion）文件中使用它

有什么消息吗

变化：

$("myTable").tablesorter();

为了

原因是您是根据元素的Id来选择元素的，它需要在元素前面加上

如果您想将

tableSorter

插件应用于所有具有

tableSorter

类的表，那么您可以执行以下操作：

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

更改：

$("myTable").tablesorter();

为了

原因是您是根据元素的Id来选择元素的，它需要在元素前面加上

如果您想将

tableSorter

插件应用于所有具有

tableSorter

类的表，那么您可以执行以下操作：

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

通过移除头部标签并重新排列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>


$（文档）.ready（函数（）
{ 
$（“##myTable”）.tablesorter（）；
} 
); 
姓
名字
电子邮件
应得的
网站
史密斯
约翰
jsmith@gmail.com 
$50.00 
http://www.jsmith.com 
巴赫
直率的
fbach@yahoo.com 
$50.00 
http://www.frank.com 
雌鹿
杰森
jdoe@hotmail.com 
$100.00 
http://www.jdoe.com 
康威
提姆
tconway@earthlink.net 
$50.00 
http://www.timconway.com

通过移除头部标签并重新排列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>


$（文档）.ready（函数（）
{ 
$（“##myTable”）.tablesorter（）；
} 
); 
姓
名字
电子邮件
应得的
网站
史密斯
约翰
jsmith@gmail.com 
$50.00 
http://www.jsmith.com 
巴赫
直率的
fbach@yahoo.com 
$50.00 
http://www.frank.com 
雌鹿
杰森
jdoe@hotmail.com 
$100.00 
http://www.jdoe.com 
康威
提姆
tconway@earthlink.net 
$50.00 
http://www.timconway.com

我也有同样的问题。我通过添加下载中包含的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>


2000年至2010年人口
$（文档）.ready（函数（）{
$（“#数据表”）.tablesorter（）；
}); 
2000年至2010年的人口变化
各州排名表：2000年至2010年人口变化
陈述
2000人口
2010年人口
数字变化
百分比变化
加利福尼亚
33871648
37253956
3382308
10
得克萨斯州
20851820
25145561
4293741
20.6
纽约
18976457
19378102
401645
2.1
怀俄明州
493782
563626
69844
14.1

我也有同样的问题。我通过添加下载中包含的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>


2000年至2010年人口
$（文档）.ready（函数（）{
$（“#数据表”）.tablesorter（）；
}); 
2000年至2010年的人口变化
各州排名表：2000年至2010年人口变化
陈述
2000人口
2010年人口
数字变化
百分比变化
加利福尼亚
33871648
37253956
3382308
10
得克萨斯州
20851820
25145561
4293741
20.6
纽约
18976457
19378102
401645
2.1
怀俄明州
493782
563626
69844
14.1

对不起，事情不是这样的。我以前用英镑符号试过。在我粘贴代码之前，它不小心被省略了。@FZ我的演示效果很好，它基于您的代码。你一定有不同的问题。如果你有谷歌浏览器，按F12重新启动你的页面。然后