使用tablesorter jquery
使用tablesorter jquery
提问于 2010-11-15 08:47:02
我在使用tablesorter对hta中生成的表进行排序时遇到了一些问题。我不知道如何在新的table.Bellow上启用tablesorter是一个测试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>在达塔库斯的帮助下，达塔库斯把我引向了正确的方向，我设法找到了一个临时的解决方案，它不涉及超时(分页仍然不能正常工作)。
<script type="text/javascript">
$(document).ready(function(){
$('#test-tablesorter').click(function(){
$('table').addClass('tablesorter').tablesorter();
$('table')
.tablesorterPager({container: $("#pager")});
});
});
</script> 我在按钮中添加了id=“表-分类器”。在互联网上，这个脚本的分页插件有一些问题。我需要进一步调查。
我发现了分页的问题。这是由每个生源末尾的"/“缺失造成的。我最初的文章没有正确地关闭原始数据(当我复制/粘贴代码以创建更多数据时，可能会发生这种情况)。表语法是一个问题："<"/tr">“
回答 1
Stack Overflow用户
发布于 2010-11-15 09:29:28
有两件事发生：
1)在table#table上的tablesorter被vbscript进一步呈现到页面下方之前，您是否在此之前调用它？该表可能还没有排序。
( 2)我从来没有实际使用过脚踏元素，但它不一定要紧跟在tbody后面吗？
HTH，
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);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4182709
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号