JQuery / Javascript: modificação do lado do cliente do asp.net datagrid saída para permitir tablesorter ao trabalho

Question

A saída do asp.net datagrid não inclui os elementos thead e tbody necessários para o tablesorter jquery ao trabalho.

por exemplo. parece que isso:

    <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 ele precisa olhar como esta:

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

Eu bati o seguinte javascript para inserir dinamicamente-los, mas a tabela ainda não é classificável. Eu já confirmou que se eu manualmente inserir os thead e tbody tags diretamente no HTML de saída, a tabela é classificável, mas quando eu tento fazê-lo usando o DOM, ele não parece trabalho.

O que eu estou ausente?

    $(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: Eu realmente resolveu o problema antes de eu postei a pergunta, mas eu pensei em ir em frente e postá-lo de qualquer maneira, como ele pode ser útil para os outros ... Veja minha resposta abaixo.

Answer 1

Aparentemente, um elemento fantasma aparece na saída. O truque é para garantir que ele seja removido antes de adicionar nos gerados ... Esperemos que este será útil para alguém!

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

O código acima ainda não aborda as células do cabeçalho. Para convertê-los de tags para tags que você pode adicionar o seguinte:

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