JQuery / Javascript: modificación del lado del cliente de la producción asp.net cuadrícula de datos para permitir que funcione tablesorter

Question

La salida de la cuadrícula de datos asp.net no incluye los elementos THEAD y TBODY necesarios para la tablesorter jquery a trabajar.

por ejemplo. se parece a esto:

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

y tiene que tener este aspecto:

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

Toqué el siguiente JavaScript para insertar de forma dinámica, pero la mesa todavía no se puede ordenar. He confirmado que si inserto manualmente las etiquetas THEAD y tbody directamente en el html de salida, la tabla se puede ordenar, pero cuando trato de hacerlo usando el DOM, no parece trabajar.

¿Qué me falta?

    $(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 realidad he resuelto el problema antes de que he publicado la pregunta, pero pensé que me gustaría ir por delante y que lo ponga de todos modos, ya que puede ser útil a los demás ... Véase mi respuesta a continuación.

Answer 1

Al parecer, un elemento fantasma aparece en la salida. El truco está en asegurarse de que se retira antes de añadir en los generados ... Esperamos que esto sea útil a alguien!

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

El código anterior aún no se ocupa de las células en la cabecera. Para convertirlos de etiquetas para etiquetas se puede añadir lo siguiente:

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