jQuery/Javascript:Модификация на стороне клиента asp.net вывод сетки данных для обеспечения работы tablesorter

Question

Выходные данные asp.net datagrid не включает элементы thead и tbody, необходимые для работы сортировщика таблиц jquery.

Например.это выглядит примерно так:

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

и это должно выглядеть примерно так:

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

Я создал следующий javascript для их динамической вставки, но таблица по-прежнему не поддается сортировке.Я подтвердил, что если я вручную вставлю теги thead и tbody непосредственно в выходной HTML-код, таблица будет сортироваться, но когда я пытаюсь сделать это с помощью DOM, похоже, это не работает.

Что я упускаю из виду?

    $(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(); 
        } 
    ); 

Редактировать:На самом деле я решил проблему до того, как опубликовал вопрос, но я подумал, что все равно пойду дальше и опубликую его, поскольку это может быть полезно другим...Смотрите мой ответ ниже.

Answer 1

По-видимому, фантомный <tbody> элемент появляется в выходных данных.Хитрость заключается в том, чтобы убедиться, что он удален, прежде чем добавлять сгенерированные...Надеюсь, это будет кому-то полезно!

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

Приведенный выше код по-прежнему не обращается к ячейкам в заголовке.Чтобы преобразовать их из тегов в теги, вы можете добавить это:

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