using tablesorter jquery

J'ai quelques problèmes en utilisant tablesorter pour trier une table qui est générée à l'intérieur d'un hta. Je ne sais pas comment activer tablesorter sur la nouvelle table.Bellow est un fichier html de test. À des fins de test, je recommande d'utiliser IE parce que contient VBS. THX!using 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>

Avec l'aide reçue de dartacus qui m'a orienté vers la droite j'ai réussi à trouver un wich sollution temporaire n'implique pas délai d'attente (pagination de travail toujours pas droit)

<script type="text/javascript"> 


$(document).ready(function(){ 

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


}); 

</script>

J'ai ajouté id = "table-trieur" sur le bouton. Il y a quelques problèmes concernant le plugin pagination de ce script sur internet. J'ai besoin d'enquêter plus loin.

J'ai trouvé le problème de la pagination. Il a été causé par le "/" manquant à la fin de chaque cru. Mon post original ne ferme pas correctement le brut (peut-être arrivé quand j'ai copié/collé le code pour créer plus de données). La syntaxe de table était la question: « < «/tr »> »

Source

2010-11-15 cippall

Deux choses se produisent:

1) Vous appelez tablesorter sur une table de # avant qu'il ait été rendu dans le navigateur par le vbscript plus bas la page? La table n'existe peut-être pas encore à trier.

2) Je n'ai jamais réellement utilisé un élément tfoot, mais n'est-il pas nécessaire de le faire après le tbody?

HTH,

D'accord, vous pouvez essayer cette place. Je ne l'ai pas complètement testé, mais cela pourrait aider. Le composant jquery a été placé dans un gestionnaire document.ready, et la fonction permettant de trier la table a un délai d'attente de sorte qu'il y a un délai d'une seconde pour permettre à la table d'être rendue avant de la rendre triable.

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

    }); 

});

Source

2010-11-15 09:29:28 dartacus

1. Je ne sais pas comment appeler tablesorter après la table obtient render.Any aide est appreciated.2.It ne dure où le tfoot est spécifié (dans la mesure où i connaître). – cippall

J'ai eu le temps de le tester et ça marche, MAIS ... cliquez une fois la table est triée, cliquez deux fois la table disparaître, cliquez à nouveau sur la table est visible .... Une suggestion? – cippall

Pas du haut de ma tête, non - je n'ai pas pu reproduire le comportement que vous décrivez avec la ligne de tablesorter mis en commentaire (je n'ai pas ce plugin disponible). – dartacus

Répondre

Questions connexes