JQuery / Javascript: modification côté client de sortie asp.net DataGrid pour permettre tablesorter de travailler

Question

La sortie du DataGrid asp.net ne comprend pas les éléments thead et tbody nécessaires à la tablesorter jquery au travail.

par exemple. 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érer manuellement les balises thead et tbody directement dans le code HTML de sortie, la table est sortable, mais lorsque je tente de le faire en utilisant les DOM, il ne semble pas fonctionner.

Qu'est-ce que je suis absent?

    $(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, comme il peut être utile à d'autres ... Voir ma réponse ci-dessous.

Answer 1

Apparemment, un élément fantôme apparaît dans la sortie. L'astuce consiste à veiller à ce qu'il est retiré avant d'ajouter ceux générés ... Espérons 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 ne répond toujours pas aux cellules dans l'en-tête. Pour les convertir balises à des balises, vous pouvez ajouter ceci:

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