정렬 수입 HTML 테이블

Question

내 테이블을 채 웁니다 다음이 있습니다

if (jsonObj[0].array !== 'undefined' && jsonObj[0].array.length > 0) { 
    for (var i = 0; i < jsonObj[0].array.length; i++) { 
     var table_row = "<tr><td>" + jsonObj[0].array[i].siteId + "</td>"; 

     var date = new Date(0); 
     date.setUTCSeconds(jsonObj[0].array[i].time); 
     table_row = table_row + "<td>" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + "</td>"; 
     table_row = table_row + "<td>" + jsonObj[0].array[i].field1 + "</td>"; 
     table_row = table_row + "<td>" + jsonObj[0].array[i].field2 + "</td>"; 
     table_row = table_row + "<td>" + jsonObj[0].array[i].field3 + "</td>"; 
     table_row = table_row + "<td>" + jsonObj[0].array[i].field4 + "</td>"; 

     var totalCount = jsonObj[0].array[i].field1 + jsonObj[0].array[i].field2 + jsonObj[0].array[i].field3 + + jsonObj[0].array[i].field4; 

     if (totalCount > 100) { 
      table_row = table_row + totalCount + "</td></tr>"; 
     } else if (totalCount > 80){ 
      table_row = table_row + totalCount + "</td></tr>"; 
     } else { 
      table_row = table_row + totalCount + "</td></tr>"; 
     } 

     $("#my-table").find("#my-table-body").append(table_row); 
    } 
} 

나는 내 .html 파일에있는 테이블에 대해 다음과 같은 마크 업이 있습니다

<table id="my-table" style="height:200px; width:1020px" class="table table-bordered"> 
      <thead> 
       <tr> 
        <th>Field 1 Title</th> 
        <th>Field 2 Title</th> 
        <th>Field 3 Title</th> 
        <th>Field 4 Title</th> 
       </tr> 
      </thead> 
      <tbody id="my-table-body"> 
      </tbody> 
     </table> 

내가 각 열을 만들고 싶어를 정렬 가능. 그래서 우리가 테이블에서 'Field1 Title'을 선택하면 테이블을 정렬 할 자바 스크립트에서 함수를 호출해야합니다. 누군가의 도움이, 내가 tablesorter에를 시도 할 수 있지만이 기능을 사용하여 작동하지 않는 것 :

$(document).ready(function() { 
$("#my-table").tablesorter() 
}); 

Answer 1

을이 시도 (청소는 그래서 한 번만 DOM을 "접촉") :

if (jsonObj[0].array !== 'undefined' && jsonObj[0].array.length > 0) { 
    var table_rows = ""; 
    for (var i = 0; i < jsonObj[0].array.length; i++) { 
     table_row += "<tr><td>" + jsonObj[0].array[i].siteId + "</td>"; 

     var date = new Date(0); 
     date.setUTCSeconds(jsonObj[0].array[i].time); 
     table_row += "<td>" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + "</td>" + 
      "<td>" + jsonObj[0].array[i].field1 + "</td>" + 
      "<td>" + jsonObj[0].array[i].field2 + "</td>" + 
      "<td>" + jsonObj[0].array[i].field3 + "</td>" + 
      "<td>" + jsonObj[0].array[i].field4 + "</td>"; 

     var totalCount = jsonObj[0].array[i].field1 + jsonObj[0].array[i].field2 + jsonObj[0].array[i].field3 + + jsonObj[0].array[i].field4; 

     /* I'm not sure what this is about 
     if (totalCount > 100) { 
      table_row = table_row + totalCount + "</td></tr>"; 
     } else if (totalCount > 80){ 
      table_row = table_row + totalCount + "</td></tr>"; 
     } else { 
      table_row = table_row + totalCount + "</td></tr>"; 
     } 
     but, the following does the same thing 
     (and adds the missing opening "<td>"): 
     */ 
     table_row += "<td>" + totalCount + "</td></tr>"; 

    } 
    $("#my-table-body").append(table_row); 
    $('#my-table').tablesorter(); 
} 

tablesorter에 이미, intead를 다시 초기화 initialzied 경우,이과 마지막 두 줄을 바꿉니다

$("#my-table-body").append(table_row); 
$('#my-table').trigger('update');