JQuery / Javascript: Cliente modifica lato di uscita asp.net datagrid per consentire di lavorare tablesorter

Question

L'uscita del datagrid asp.net non include gli elementi thead e tbody necessari per la tablesorter jquery lavorare.

es. sembra che questo:

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

e deve assomigliare a questo:

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

ho bussato il seguente javascript per inserirli in modo dinamico, ma il tavolo non è ancora ordinabile. Ho confermato che se inserisco manualmente i tag thead e tbody direttamente nel codice HTML di uscita, il tavolo è ordinabile, ma quando provo a farlo utilizzando il DOM, non sembra funzionare.

Che cosa mi manca?

    $(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: ho effettivamente risolto il problema prima che ho postato la domanda, ma ho pensato di andare avanti e post-it in ogni caso, per quanto possa essere utile ad altri ... Vedere la mia risposta qui sotto.

Answer 1

A quanto pare, un elemento fantasma appare nell'output. Il trucco è quello di garantire che venga rimosso prima di aggiungere a quelli generati ... Speriamo che questo sarà utile a qualcuno!

    $(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

Il codice di cui sopra ancora non affronta le cellule nell'intestazione. Per convertire loro di tag per i tag è possibile aggiungere questo:

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