동적으로 추가 된 열에서 tablesorter.js ColumnSelector 사용

Question

열 목록이 포함 된 텍스트 파일에서 테이블을 만듭니다. 내 원본 테이블에는 이름과 ID #라는 두 개의 열이 있습니다. 나는 다양한 '점수'로 텍스트 파일을 읽고 다음 코드를 실행합니다 나는 그러나

var resort = true, 
    callback = function(myform){ 
    }; 
    $("table").trigger("updateAll", [ resort, callback ]); 

으로 테이블을 업데이트

myform.find('tr').each(function(){ 
      var trow = $(this); 
      if(trow.index() === 0){ 
       trow.append("<th style=\"width:100px\" data-priority=\"4\" data-sortinitialorder=\"asc\" data-placeholder=\"Ex: 255\">" + score + "</th>"); 
      }else if(trow.index() === 2){ 
       trow.append('<td></td>'); //eventually this will add data but right now I'm just testing it so I'm just adding a blank row 
      } 

후를, 나는 최근에되도록 ColumnSelector 위젯을 포함하도록 시도 사용자는 표시 할 점수 열을 결정할 수 있으며 추가 한 열은 사용할 수 없습니다. 두 개의 원래 열이있을 때 작동하지만 추가 된 열을 포함 시키려고하면 ColumnSelector가 손상됩니다. 확인란을 클릭 할 수 있지만 열은 변경되지 않습니다. 또한 선택할 수있는 열 목록에 새 열을 추가하지 않습니다.

누구든지 아이디어가 있습니까?

Answer 1

columnSelector 코드에서 버그가 발생한 것 같습니다. 마스터 브랜치에서 열 선택기 위젯을 업데이트 했으므로 다음 릴리스까지 패치를 사용할 수 없지만 copy the file directly from here 수 있습니다.

Here is a demo of the fix.

$(function() { 

    var $t = $('table'); 
    $t.tablesorter({ 
    theme: 'blue', 
    widgets: ['zebra', 'columnSelector', 'stickyHeaders'], 
    widgetOptions: { 
     // target the column selector markup 
     columnSelector_container: $('#columnSelector') 
    } 
    }); 

    $('button').click(function() { 
    $t.find('thead tr').append('<th>Data</th>'); 
    $t.find('tbody tr').each(function() { 
     $(this).append('<td>' + Math.round(Math.random() * 100) + '</td>'); 
    }); 
    $t.trigger('updateAll'); 
    }); 

});