JQuery/Javascript: модификация выходных данных asp.net на стороне клиента, чтобы позволить tablesorter работать

Question

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

E.g. это выглядит следующим образом:

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

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

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>"); });