使用tablesorter jquery

我遇到了一些問題，使用tablesorter排序生成一個hta內的表。我不知道如何在新表上啓用tablesorter .Bellow是一個測試html文件。爲了測試目的，我建議使用IE因爲包含VBS。謝謝！使用tablesorter jquery

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

隨着從幫助誰向我指出了正確的方向我設法找到一個臨時sollution至極dartacus收到不涉及超時（分頁仍不能正確工作）

<script type="text/javascript"> 


$(document).ready(function(){ 

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


}); 

</script>

我加號=「table-sorter」到按鈕。這個腳本的分頁插件在互聯網上有一些問題。我需要進一步調查。

我發現問題與分頁。這是由每個原料末尾缺失的「/」造成的。我原來的文章沒有正確關閉原始文件（可能發生在我複製/粘貼代碼以創建更多數據時）。該表的語法是問題：「<‘/ TR’>」發生

來源

2010-11-15 cippall

兩件事情：

1）你叫上表＃表的tablesorter之前它已經在瀏覽器中的VBScript中被渲染進一步下跌這一頁？該表可能還不存在排序。

2）我從來沒有真正使用過tfoot元素，但是它不必在tbody之後出現嗎？

HTH，

摹

好了，你可以改爲嘗試。我還沒有完全測試它，但它可能會有所幫助。

jquery的東西已經放到了document.ready處理程序中，並且使表可排序的函數有一個超時設置，以便延遲一秒以允許表格在可排序之前被渲染。

摹

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-15 09:29:28 dartacus

1.我不知道如何在表後調用的tablesorter得到render.Any幫助appreciated.2.It不母校在指定了TFOOT（據我知道）。 – cippall 2010-11-15 09:42:49

我有時間去測試它，它工作正常，但是......點擊一次表格被排序後，點擊兩次表格消失，再次單擊表格可見....任何建議？ – cippall 2010-11-15 12:36:43

不是我的頭頂，沒有 - 我無法複製你描述的行爲與表格註釋行（我沒有這個插件可用）。 – dartacus 2010-11-15 14:27:45

使用tablesorter jquery

回答

相關問題