0

我在使用 tablesorter 对在 hta 中生成的表进行排序时遇到了一些问题。我不知道如何在新表上启用 tablesorter。Bellow 是一个测试 html 文件。出于测试目的，我建议使用 IE，因为它包含 VBS。谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
 <title>Test Tablesorter</title>
 <script type="text/javascript" src="js/jquery-latest.js"></script>
 <script type="text/javascript" src="js/jquery.tablesorter.js"></script>
 <script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
 <script type="text/javascript" src="js/chili-1.8b.js"></script>
 <script type="text/javascript" src="js/docs.js"></script>
 <script type="text/javascript">
 $(function() {
  $("table")
   .tablesorter({widthFixed: true, widgets: ['zebra']})
   .tablesorterPager({container: $("#pager")});

 });
 </script>

</head>
<style>
table.tablesorter
{
 background-color: #CDCDCD;
 font-family: arial;
 font-size: 8pt;
 margin: 10px 0pt 15px;
 text-align: left;
 width: 100%;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th
{
 background-color: #e6EEEE;
 border: 1px solid #FFF;
 font-size: 8pt;
 padding: 4px;
}
table.tablesorter thead tr .header
{
 background-image: url(img/bg.gif);
 background-position: center right;
 background-repeat: no-repeat;
 cursor: pointer;
}
table.tablesorter tbody td
{
 background-color: #FFF;
 color: #3D3D3D;
 padding: 4px;
 vertical-align: top;
}
table.tablesorter tbody tr.odd td
{
 background-color: #F0F0F6;
}
table.tablesorter thead tr .headerSortUp
{
 background-image: url(img/asc.gif);
}
table.tablesorter thead tr .headerSortDown
{
 background-image: url(img/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp
{
 background-color: #8dbdd8;
}
</style>

<body>

<script language="VBscript">

Sub CheckSystem
strHTML = strHTML & "<table cellspacing='1' class='tablesorter' id='table'>"
strHTML = strHTML & "<thead> "
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<th>Name</th>"
strHTML = strHTML & "<th>Major</th>"
strHTML = strHTML & "<th>Sex</th>"
strHTML = strHTML & "<th>English</th>"
strHTML = strHTML & "<th>Japanese</th>"
strHTML = strHTML & "</tr>"
strHTML = strHTML & "</thead> "
strHTML = strHTML & "<tfoot> "
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<th>Name</th>"
strHTML = strHTML & "<th>Major</th>"
strHTML = strHTML & "<th>Sex</th>"
strHTML = strHTML & "<th>English</th>"
strHTML = strHTML & "<th>Japanese</th>"
strHTML = strHTML & "</tr>"
strHTML = strHTML & "</tfoot> "
strHTML = strHTML & "<tbody>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<td>Student01</td>"
strHTML = strHTML & "<td>Languages</td>"
strHTML = strHTML & "<td>male</td>"
strHTML = strHTML & "<td>80</td>"
strHTML = strHTML & "<td>75</td>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<td>Student02</td>"
strHTML = strHTML & "<td>Languages</td>"
strHTML = strHTML & "<td>male</td>"
strHTML = strHTML & "<td>80</td>"
strHTML = strHTML & "<td>60</td>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<td>Student03</td>"
strHTML = strHTML & "<td>Languages</td>"
strHTML = strHTML & "<td>male</td>"
strHTML = strHTML & "<td>60</td>"
strHTML = strHTML & "<td>40</td>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "<td>Student04</td>"
strHTML = strHTML & "<td>Languages</td>"
strHTML = strHTML & "<td>male</td>"
strHTML = strHTML & "<td>30</td>"
strHTML = strHTML & "<td>20</td>"
strHTML = strHTML & "<tr>"
strHTML = strHTML & "</tbody>"
strHTML = strHTML & "</table>"
strHTML = strHTML & "<span id='pager' class='pager'>"
strHTML = strHTML & "<form>"
strHTML = strHTML & "<img src='img/first.png' class='first'/>"
strHTML = strHTML & "<img src='img/prev.png' class='prev'/>"
strHTML = strHTML & "<input type='text' class='pagedisplay'/>"
strHTML = strHTML & "<img src='img/next.png' class='next'/>"
strHTML = strHTML & "<img src='img/last.png' class='last'/>"
strHTML = strHTML & "<select class='pagesize'>"
strHTML = strHTML & "<option selected='selected' value='5'>5</option>"
strHTML = strHTML & "<option value='10'>10</option>"
strHTML = strHTML & "<option value='30'>30</option>"
strHTML = strHTML & "<option  value='40'>40</option>"
strHTML = strHTML & "</select>"
strHTML = strHTML & "</form>"
strHTML = strHTML & "</span>"

DataArea.InnerHTML = strHTML
End Sub
</script>

<body>
<p><span id="DataArea"></span></p>
<input type="button"  class="button" value="CheckSystem" style="width:70" onClick="VBScript:CheckSystem">



</body>

</html>

在 dartacus 的帮助下，我找到了一个不涉及超时的临时解决方案（分页仍然无法正常工作）

 <script type="text/javascript"> 


 $(document).ready(function(){

  $('#test-tablesorter').click(function(){
   $('table').addClass('tablesorter').tablesorter();
   $('table')
   .tablesorterPager({container: $("#pager")});
  }); 


});

</script>

我在按钮上添加了 id="table-sorter"。网上有关于这个脚本的分页插件的一些问题。我需要进一步调查。

我发现了分页的问题。这是由每个原始文件末尾缺少的“/”引起的。我的原始帖子没有正确关闭原始帖子（可能在我复制/粘贴代码以创建更多数据时发生）。表语法是问题："<"/tr">"

4

1 回答 1

0

发生两件事：

1）在页面下方的 vbscript 在浏览器中呈现它之前，您是否在 table#table 上调用 tablesorter？该表可能尚不存在，尚待排序。

2）我从未真正使用过 tfoot 元素，但它不必在 tbody 之后出现吗？

高温下，

G

好的，你可以试试这个。我还没有完全测试它，但它可能会有所帮助。

jquery 的内容已被放入 document.ready 处理程序中，并且使表可排序的函数设置了超时，以便在表可排序之前呈现一秒钟的延迟。

G

    function initTableSort(){

    $("table").tablesorter({widthFixed: true, widgets: ['zebra']});
    $("table").tablesorterPager({container: $("#pager")});

}

//execute when doc loaded
$(document).ready(function(){

    $('input#tableCreateBtn').click(function(){

    //give the table 1000 milliseconds to load before calling the fn which
    //makes it sortable

        setTimeout("initTableSort()", 1000);

    });

});
于 2010-11-15T09:29:28.067 回答