JQuery/Javascript : tablesporter가 작동하도록 asp.net datagrid 출력의 클라이언트 측 수정

Question

asp.net datagrid의 출력에는 jquery tablesorter가 작동하는 데 필요한 thead 및 tbody 요소가 포함되어 있지 않습니다.

예.

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

내가 동적으로 삽입하는 다음과 같은 자바 스크립트를 노크하지만 테이블은 여전히 ​​정렬되지 않습니다. 수동으로 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>"); });