jQuery tablesorter() 不工作..！答案

【问题标题】：jQuery tablesorter() is not working..!jQuery tablesorter() 不工作..！
【发布时间】：2014-07-09 18:04:09
【问题描述】：

这是我在浏览器上渲染后的 HTML 代码。我正在尝试通过单击标题对 GridView 中的列进行排序。但这对我不起作用。我在谷歌浏览了很多答案。我通过在 tablesorter() 关键字中添加/删除一些设置来尝试两种方式。他们都没有解决我的问题。这里的任何人都可以建议我可能是什么根本原因。请帮帮我。

<html>
<head><title>

</title><link href="themes/blue/style.css" rel="stylesheet" /><link     href="themes/green/style.css" rel="stylesheet" />
<script src="~/JQuery/jquery-1.9.0.min.js" type="text/javascript"></script>

<script src="~/JQuery/jquery.tablesorter.js" type="text/javascript"></script>
<script src="~/JQuery/TableSorter.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#GrdViewEmployee").tablesorter({ sortList: [[0, 0], [2, 1]], widgets:'zebra' });
    });
</script>
</head>
<body class="tablesorterBlue">
<form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="fauQ7GKDqTon5mt7NHJnOCzVzfTVHWHj+gG3j+CA8mTf4JJVPho0PBzFatn/hz/0xu7X0+jfUVQHlCgPQh5CNnoHCyzZOnTqgr7nSstUfCj5JlrZkhV7468h3Vx1e7Er" />
</div>

    <div>
<table cellspacing="0" rules="all" class="tablesorterBlue" border="1" id="GrdViewEmployee" style="border-collapse:collapse;">
    <thead>
        <tr>
            <th scope="col">empId</th><th scope="col">empName</th><th scope="col">empEMail</th><th scope="col">empPhone</th>
        </tr>
    </thead><tbody>
        <tr>
            <td>1</td><td>rameshwar</td><td>ram@hcl.com</td><td>1234</td>
        </tr><tr>
            <td>2</td><td>shrivatsav</td><td>ggtgh@shri.com</td><td>1234</td>
        </tr><tr>
            <td>3</td><td>ganga</td><td>karna@kulla.com</td><td>54321</td>
        </tr><tr>
            <td>4</td><td>krishna</td><td>krish@krish.com</td><td>98766</td>
        </tr><tr>
            <td>5</td><td>mahesh</td><td>hfgsdhjf@jdfsgjd</td><td>347234</td>
        </tr><tr>
            <td>6</td><td>Shridhar</td><td>shri@shri.com</td><td>545454</td>
        </tr>
    </tbody><tfoot>

    </tfoot>
</table>
</div>
</form>
</body>
</html>

【问题讨论】：

标签： jquery sorting gridview tablesorter

【解决方案1】：

我使用了你上面的代码，它适用于this demo

我确实必须进行两项更改

将表格类名改为“tablesorter-blue”
```
<table class="tablesorter-blue" .... >
```
widget 选项需要一个数组：
```
widgets: [ 'zebra' ]
```

所以，如果我不得不猜测，我会说 jQuery 或插件文件没有正确加载。

问题可能与以下之一有关：

<script src="~/JQuery/jquery.tablesorter.js" type="text/javascript"></script>
<script src="~/JQuery/TableSorter.js" type="text/javascript"></script>

波浪号 (~)，我相信它只适用于 asp.net 服务器控件，所以我不确定是不是这里的问题。
目录名的大写； “JQuery”通常输入为带有小写字母 J 的“jQuery”
或“TableSorter.js”文件名的名称。没有一个插件文件以这种方式命名，大写的“T”，所以这是一个自定义脚本文件吗？

最后，请检查浏览器控制台（按 F12）是否有任何错误。

【讨论】：

Hurrey... 感谢您在我的问题上花费了宝贵的时间。是的你是对的。问题是 .js 文件没有加载到浏览器上，因为我使用了“~”符号。我通过提到绝对路径来纠正它。
我遇到了同样的问题，结果我错过了在我的表格中使用 thead 和 tbody html 标签。显然 tablesorter 依赖于它们。