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为您检测这种准备状态。代码包含在里面 $（document）.ready（）只会运行一次页面Document Object 模型（DOM）已准备好执行JavaScript代码。

所以将脚本更改为：

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

希望果汁开始运转！

Answer 2

我知道这个问题已经过时了，但我遇到了一个问题，就是让tableorter对我动态创建的表进行排序，过了一段时间后我意识到问题如下：

这无法排序：

<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>

Tablesorter Jquery插件不起作用（asp项目）

2 个答案: