tablesorter plungin not working for dynamically created table

tablesorter plungin not working for dynamically created table



 

$(document).ready(function

() {

$('#dvTable1').tablesorter();

}

$.getJSON("/Home/GetWONumberActivityEquipmentParts", { 'dateFrom': pData[0], 'dateTo': pData[1], 'deptName': deptName },


function (json) {

for (var i = 0; i < json.length; i++)




{



tr = $('<tr />');


tr.append("<td>" + json[i].WNo + "</td>");


tr.append("<td>" + json[i].Division + "</td>");


tr.append("<td>" + json[i].ActivityName + "</td>");


tr.append("<td>" + json[i].EquipmentName + "</td>");


tr.append('</tr>');


$("#tbl1").append(tr);




}

}

);



<table border="1" style="border-color:blue" cellpadding="1" width="100%" hidden="hidden" id="dvTable1" class="tablesorter">

<thead style="background-color: slateblue; color:white ">

<tr>

<th>Number </th>

<th>Department </th>

<th>ActivityName </th>

<th>EquipmentName </th>

</tr>

</thead>

<tbody id="tbl1">

<tr></tr>

</tbody>

</table>