Tablesorter Jquery plugin not work (asp project)

Question

我有一个简单的表格，上面有thead和tbody。

我已将其添加到我的site.master中：

<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery.tablesorter.js"></script>

在asp页面中的表之前：

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

但是我无法对表的列进行排序。

实际上，我在桌子上使用另一个插件来修复标题。也许我有冲突???

谢谢

编辑：CSS

实际上插件没有排序，我看不到 bg.gif/asc.gif/desc.gif 图像.. 不知道为什么。

 table.tablesorter th { 
  cursor:pointer;  
  font-size: 12px; 
  text-align:center; 
  background: url('Images/bg.gif'); 
  background-color: #91061F; 
  color: white;
  border: 1px  white;
  padding: 3px;
  height: 20px
} 
table.tablesorter .headerSortUp { 
  background-image: url('Images/asc.gif'); 
} 
table.tablesorter .headerSortDown { 
  background-image: url('Images/desc.gif'); 
}

Answer 1

您绑定到文档加载两次。

// A $( document ).ready() block.
$(document).ready(function(){
    //stuff
});
// Shorthand for $( document ).ready()
$(function(){
    //stuff
});

JQuery 文档： 在文档"准备就绪"之前，无法安全地操作页面。 jQuery 会为您检测这种就绪状态。其中包含的代码 $（ 文档 ）.ready（） 将只运行一次页面文档对象 模型（DOM）已准备好执行JavaScript代码。

因此，请将脚本更改为：

$(function () {
    $("#DispTable").tablesorter();
});

希望果汁开始运行！

Answer 2

我知道

这个问题很旧，但是我在让表排序器对我动态创建的表进行排序时遇到了问题，一段时间后我意识到问题如下：

这无法排序：

<table id="myTable" class="tablesorter">
    <thead>
        <tr>
            <td>Number</td>
            <td>Letter</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>abc</td>
        </tr>
        <tr>
            <td>456</td>
            <td>def</td>
        </tr>
    </tbody>
</table>

这排序：

<table id="myTable" class="tablesorter">
    <thead>
        <tr>
            <th>Number</th> <!-- note th instead of td -->
            <th>Letter</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>abc</td>
        </tr>
        <tr>
            <td>456</td>
            <td>def</td>
        </tr>
    </tbody>
</table>