Problème de trieur de table JQuery

Question

J'ai appris qu'en essayant d'utiliser le plugin tablesorter de jquery, la table doit utiliser les balises <> et
< tbody>. J'utilise une table html, et j'utilise l'attribut runat = "server" car j'ai besoin de lier des données à la table côté serveur. mais en utilisant l'attribut runat = le code serveur est rendu dans une way..instead différente de la source de vue qui ressemble à ceci qui est ce qui est à mon avis de balisage:

<table id="Table"> 
    <thead> 
     <tr> <th>1st</th> <th>2nd</th> <th>3rd</th> </tr> 
    </thead> 
    <tbody> 
     <tr><td>1st value</td><td>2nd value</td><td>3rd value</td></tr> 
     <tr><td>1st value</td><td>2nd value</td><td>3rd value< /td></tr> 
     <tr><td>1st value</td><td>2nd value</td><td>3rd value</td></tr> 
     <tr><td>1st value</td><td>2nd value</td><td>3rd value</td></tr> 
    </tbody> 
</table> 

il ressemble à cela, mais sans < thead> et < tbody> tags ... ce qui rendra le trieur de table ne fonctionne pas? Quelqu'un peut-il m'aider à résoudre ce problème? « .NET 3.5 sp1 est la version que je suis en utilisant »

Answer 1

vous devriez jeter un coup d'oeil ici - Code Project Sortable Gridview using JQuery Tablesorter

Essentiellement, vous devez utiliser le UseAccessibleHeader property du Gridview de sorte qu'une balise thead est émis dans la sortie HTML .

protected void Page_Load(object sender, EventArgs e) 
{ 
if (this.gridView.Rows.Count > 0) 
{ 
gridView.UseAccessibleHeader = true; 
gridView.HeaderRow.TableSection = TableRowSection.TableHeader; 
gridView.FooterRow.TableSection = TableRowSection.TableFooter; 
} 
} 

si vous utilisez une table html avec l'attribut runat = « server » au lieu de contrôles serveur asp.net, il semble que il n'y a pas un moyen facile d'éviter les balises thead de ne pas rendre dans le html sortie. Vous pouvez utiliser certains JQuery pour insérer des balises thead dans le DOM sur le document prêt à l'emploi

//in script tags after JQuery and JQuery tablesorter src declarations 
    $(function() 
    { 
     $('#test').prepend(
     $('<thead></thead>').append($('#test tr:first').remove()) 
     ); 

     $("#test").tablesorter(); 
      //your table options 
    }); 


//your html and asp markup 
<table id="test" runat="server"> 
<thead><tr><th>1</th><th>2</th><th>3</th></tr></thead> 
<tbody> 
<tr><td>my data 1.1</td><td>this data 1.2</td><td>that data 1.3</td></tr> 
<tr><td>this data 2.1</td><td>that data 2.2</td><td>my data 2.3</td></tr> 
<tr><td>that data 3.1</td><td>my data 3.2</td><td>this data 3.3</td></tr> 
</tbody> 
</table> 

sorties, ce qui fonctionne correctement avec tablesorter-

<table id="test"> 
<thead> 
<tr> 
<th class="header">1</th> 
<th class="header">2</th> 
<th class="header headerSortDown">3</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>this data 1.1</td> 
<td>that data 1.2</td> 
<td>my data 1.3</td> 
</tr> 
<tr> 
<td>my data 2.1</td> 
<td>this data 2.2</td> 
<td>that data 2.3</td> 
</tr> 
<tr> 
<td>that data 3.1</td> 
<td>my data 3.2</td> 
<td>this data 3.3</td> 
</tr> 
</tbody> 
</table> 

Answer 2

début de cette ...

print("<table class='turnMeIntoTableSort'><tr><td>heading1</td><td>heading2</td></tr><tr><td>content1</td><td>content2</td></tr><tr><td>content3</td><td>content4</td></tr></table>"); 

puis faites ceci:

print("$(document).ready(){ 
     $('table.turnMeIntoTableSort > tr:first').wrap('<thead></thead>'); 
     $('table.turnMeIntoTableSort > tr:gt(1)').wrapAll('<tbody></tbody>'); 

     //now draw the tablesorter 
     $('table.turnMeIntoTableSort').tablesorter(); 
     }");