JQuery / Javascript: Client-Seite Modifikation von asp.net Datagrid-Ausgang zu ermöglichen tablesorter zu arbeiten

Question

Der Ausgang des asp.net Datagrid nicht die thead und tbody-Elemente enthält für die jquery tablesorter erforderlich arbeiten.

z. es sieht wie folgt aus:

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

, und es muss wie folgt aussehen:

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

klopfte ich die folgende Javascript bis sie dynamisch einzufügen, aber die Tabelle ist noch nicht sortierbar. Ich habe bestätigt, dass, wenn ich manuell die thead und tbody-Tags direkt in den Ausgang html einfügen, ist die Tabelle sortierbar, aber wenn ich versuche, es zu tun, um den DOM verwenden, es scheint nicht zu funktionieren.

Was bin ich fehlt?

    $(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: Ich löste das Problem tatsächlich, bevor ich die Frage gestellt, aber ich dachte, ich würde voran gehen und per Post sowieso, wie es für andere nützlich sein kann ... Siehe meine Antwort unten.

Answer 1

Offenbar ein Phantom Element erscheint in der Ausgabe. Der Trick ist, um sicherzustellen, dass es vor der Zugabe in dem generierten diejenigen entfernt ... Hoffentlich wird dies für jemanden nützlich sein!

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

Der obige Code noch bezieht sich nicht auf die Zellen in der Kopfzeile. So konvertieren sie von Tags Tags, die Sie diese hinzufügen:

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