using tablesorter jquery
I'm having some problems using tablesorter to sort a table that is generated inside an hta. I don't know how to enable tablesorter on the new table.Bellow is a test html file. For testing purpose i recommend using IE because contains VBS. Thx!
<!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'/>开发者_JAVA百科;"
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>
With the help received from dartacus who pointed me to the right direction i managed to find a temporary sollution wich doesn't involves timeout (pagination still not working right)
<script type="text/javascript">
$(document).ready(function(){
$('#test-tablesorter').click(function(){
$('table').addClass('tablesorter').tablesorter();
$('table')
.tablesorterPager({container: $("#pager")});
});
});
</script>
I added id="table-sorter" to the button. There are some issues about pagination plugin of this script over the internet. I need to investigate further.
I have found the problem with pagination. It was caused by the the missing "/" at the end of each raw. My original post doesn't close properly the raw(might happened when i copy/pasted the code to create more data). The table syntax was the issue: "<"/tr">"
Two things occur:
1) Are you calling tablesorter on table#table before it has been rendered in the browser by the vbscript further down the page? The table may not exist yet to be sorted.
2) I've never actually used a tfoot element, but does it not have to come after the tbody?
HTH,
G
Okay, you could try this instead. I haven't completely tested it, but it might help.
The jquery stuff has been put into a document.ready handler, and the function that makes the table sortable has a timeout set so that there is a delay of a second to allow the table to be rendered before making it sortable.
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);
});
});
加载中,请稍侯......
精彩评论