Jquery Tablesorter 不工作！那有什么问题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15715127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Tablesorter not working! What's wrong with that?
提问by TwentyLe
I'm new to Jquery and I'm trying to use Jquery Tablesorter plugin and I've tested it in a simple html file as below but it is not working. All I have seen in browser is only a plain table with no sorting, none clickable header, it doesn't look like what I seen on Jquery Tablesorter home page. I don't know what's wrong with my html. I have placed 2 jquery files in same folder with this html file. Please advise!
我是 Jquery 的新手，我正在尝试使用 Jquery Tablesorter 插件，我已经在一个简单的 html 文件中对其进行了测试，如下所示，但它不起作用。我在浏览器中看到的只是一个没有排序的普通表格，没有可点击的标题，它看起来不像我在 Jquery Tablesorter 主页上看到的。我不知道我的 html 有什么问题。我已将 2 个 jquery 文件与此 html 文件放在同一文件夹中。请指教！
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
</script>
</head>
<body>
<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>[email protected]</td>
<td>.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>[email protected]</td>
<td>.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>[email protected]</td>
<td>0.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>[email protected]</td>
<td>.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>
回答by Dead Man
Here's the working fiddle link. You forgot to add the tablesorter jsand tablesorter csswhich I added in external resources in jsfiddle. You can check it.
这是工作小提琴链接。您忘记添加我在 jsfiddle 的外部资源中添加的tablesorter js和tablesorter css。你可以检查一下。
回答by codenoob
Notice <th>inside <tr>instead of <td>this was what prevented it from working for me.
注意<th>内部<tr>而不是<td>这个是阻止它为我工作的原因。
<thead>
<tr>
<th>column 1</th>
<tr>
</thead>
Also the css is not needed for the tablesorter to work. If you want to keep your own formating but you want the little arrows to show, you just need the following code. and copy paste the 3 arrow gif provided by tablesorter into the same folder as the css file. or your own arrows gif if you want.
此外，tablesorter 也不需要 css 来工作。如果您想保留自己的格式但又希望显示小箭头，则只需要以下代码即可。并将tablesorter提供的3箭头gif复制粘贴到与css文件相同的文件夹中。如果你愿意，或者你自己的箭头 gif。
table.tablesorter thead tr .header {
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(desc.gif);
}
