JQuery/Javascript: Modification côté client de la sortie de la base de données asp.net pour permettre à tablesorter de fonctionner

Question

La sortie de la grille de données asp.net n'inclut pas les éléments de thead et de tbody requis pour que la table de résultats jquery fonctionne.

E.g. il ressemble à ceci:

<table> 
     <tr>this is my header row</tr> 
     <tr>content row 1</tr> 
     <tr>content row 2</tr> 
     <tr>content row 3</tr> 
     ... 
     <tr>content row n</tr> 
    </table> 

et il doit ressembler à ceci:

<table> 
     <thead> 
      <tr>this is my header row</tr> 
     </thead> 
     <tbody> 
      <tr>content row 1</tr> 
      <tr>content row 2</tr> 
      <tr>content row 3</tr> 
      ... 
      <tr>content row n</tr> 
     </tbody> 
    </table> 

Je frappai le javascript suivant pour les insérer de façon dynamique, mais la table est toujours pas sortable. J'ai confirmé que si j'insère manuellement les balises thead et tbody directement dans le HTML de sortie, la table est triable, mais quand j'essaye de le faire en utilisant le DOM, cela ne semble pas fonctionner.

Qu'est-ce qui me manque?

$(document).ready(function() 
     { 
      var tbl = document.getElementById('mytableid'); 

      // new header and body elements to be inserted 
      var tblHead = document.createElement('thead'); 
      var tblBody = document.createElement('tbody'); 
      // get the first row and the remainder 
      var headerRow = $(tbl).find('tr:first') 
      var bodyRows = $(tbl).find('tr:not(:first)'); 

      // remove the original rows 
      headerRow.remove(); 
      bodyRows.remove(); 

      // add the rows to the header and body respectively 
      $(tblHead).append(headerRow); 
      $(tblBody).append(bodyRows); 

      // add the head and body into the table 
      $(tbl).append(tblHead); 
      $(tbl).append(tblBody); 

      // apply the tablesorter 
      $(tbl).tablesorter(); 
     } 
    ); 

EDIT: En fait, je résolu le problème avant que j'ai posté la question, mais je pensais que je serais aller de l'avant et après toute façon, car il peut être utile aux autres ... Voir ma réponse ci-dessous.

Answer 1

Apparemment, un élément < fantôme t > apparaît dans la sortie. L'astuce consiste à s'assurer qu'il est supprimé avant d'ajouter ceux qui sont générés ... J'espère que cela sera utile à quelqu'un!

$(document).ready(function() 
     { 
      var tbl = document.getElementById('mytableid'); 

      // new header and body elements to be inserted 
      var tblHead = document.createElement('thead'); 
      var tblBody = document.createElement('tbody'); 
      // get the first row and the remainder 
      var headerRow = $(tbl).find('tr:first') 
      var bodyRows = $(tbl).find('tr:not(:first)'); 

      // remove the original rows 
      headerRow.remove(); 
      bodyRows.remove(); 

      // SOLUTION HERE: 
      // remove any existing thead/tbody elements 
      $(tbl).find('tbody').remove(); 
      $(tbl).find('thead').remove(); 

      // add the rows to the header and body respectively 
      $(tblHead).append(headerRow); 
      $(tblBody).append(bodyRows); 

      // add the head and body into the table 
      $(tbl).append(tblHead); 
      $(tbl).append(tblBody); 

      // apply the tablesorter 
      $(tbl).tablesorter(); 
     } 
    ); 

Answer 2

Le code ci-dessus n'adresse toujours pas les cellules dans l'en-tête. Pour les convertir des étiquettes à des balises que vous pouvez ajouter ceci:

$('thead tr td').each(function(i) { $(this).replaceWith("<th>" + $(this).html() + "<\/th>"); });