Question

我一直在尝试使用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）文件中使用它。

有关正在发生的事情的任何输入？

Answer 1

变化：

$("myTable").tablesorter();

对于

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

原因是您要按其ID选择元素，这需要前面的#。

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

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

Demo here.

Answer 2

通过删除头标记并重新排列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>

Answer 3

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

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

style.css位于以下网址：

[root download location] / themes / [blue or green] /style.css
[root download location] /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>

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

3 个答案: