1

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

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

关于发生了什么的任何输入？

4

3 回答 3

1

改变：

$("myTable").tablesorter();

为了

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

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

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

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

演示在这里。

于 2013-06-11T15:58:48.387 回答
0

通过删除 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>
于 2013-06-11T17:14:22.943 回答
0

我遇到过同样的问题。我通过添加下载中包含的 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>
于 2015-04-12T02:43:33.907 回答