table 排序功能在 fiddle 之外不起作用

Question

下面的 fiddle 完美运行，但是当我尝试在空白测试文档中重新创建它时，没有任何反应。我做错了什么？

这是我的fiddle。 https://jsfiddle.net/1djad595/2/

这是更新的代码，我无法复制上面 fiddle 的成功。 .

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />

</head>


<body>
<script>

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 

    </script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.min.js">
</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>.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>0.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 


</body>
</html>

Answer 1

我认为您需要以正确的顺序在代码中包含脚本库，首先是 jQuery 库，然后是 tablesorter

如果您复制以下代码，它一定对您有用：

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);

table.tablesorter {
 font-size: 12px;
 background-color: #4D4D4D;
 width: 100%;
 border: 1px solid #000;
}
table.tablesorter th {
 text-align: left;
 padding: 5px;
 background-color: #6E6E6E;
 color: #fff;
}
table.tablesorter td {
 color: #FFF;
 padding: 5px;
}
table.tablesorter .even {
 background-color: #3D3D3D;
}
table.tablesorter .odd {
 background-color: #6E6E6E;
}
table.tablesorter .header {
 background-image: url(bg.png);
 background-repeat: no-repeat;
 border-left: 1px solid #FFF;
 border-right: 1px solid #000;
 border-top: 1px solid #FFF;
 padding-left: 30px;
 padding-top: 8px;
 height: auto;
}
table.tablesorter .headerSortUp {
 background-image: url(asc.png);
 background-repeat: no-repeat;
}
table.tablesorter .headerSortDown {
 background-image: url(desc.png);
 background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.min.js"></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>.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>0.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table>

table 排序功能在 fiddle 之外不起作用

table sort function not working outside of fiddle

sorting

jquery

tablesorter