Table sorter plugin not firing for dynamically added rows

Table sorter plugin not firing for dynamically added rows

HI,
 
I have a html table, in which the rows are created dynamically. There is no "thead" in table.
 
I am trying to use the table sorter plugin for the pagination alone. However, I am not sure what is missed, as clicking on items in pager do not work. Also the pagintation itself is not getting done.
 
Below is the code used:
 
  1. <script type="text/javascript" src="/Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="/Scripts/test1.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.tablesorter.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.tablesorter.pager.js"></script>


  2. <link rel="stylesheet" type="text/css" href="/CSS/jquery.tablesorter.pager.css" />
    <table id="tbl1">
            <thead>
            </thead>
        </table>



  3.     <br />
        <div id="pager" class="pager">
  4.         <img src="/Images/first.png" class="first" />
  5.         <img src="/Images/prev.png" class="prev" />
  6.         <img src="/Images/next.png" class="next" />
  7.         <img src="/Images/last.png" class="last" />
           
            <select  class="pagesize">
                <option selected="selected"  value="1">1</option> // Trying for 1 record per page. But all records are shown
                <option value="20">20</option>
                <option value="30">30</option>
                <option  value="40">40</option>
            </select>






  8.     </div>
  9. // jquery - test1.js

  10. $(document).ready(function () {
  11.    RenderHtmlOnSuccess();
  12. $("#tb1")
     
    .tablesorter({widthFixed: true, widgets: ['zebra']})
     
    .tablesorterPager({container: $("#pager")});




  13. });
 
  1. function RenderHtmlOnSuccess() {
  2. // Data is getting filled. I can see 20 records
  3. $("#tbl1").append("<tbody>");
        for (var i = 0; i < newsdata.length; i++) {
            var newArray = newsdata[i].split('#');       
            for (var j = 0; j < newArray.length; j++) {
                $("#tbl1").append("<tr><td>" + newArray[j] + "</td></tr> ");
            }




  4.         if (i < (newsdata.length  - 1)) {
                $("#tbl1").append("<tr><td class='spacers'></td></tr> ");
            }       
        }
        $("#tbl1").append("</tbody>");



  5.     $('#tbl1 tr').each(function () {
            //Checks the value and sets the color accordingly
            if ($(this).find('td:first')) {
                $(this).css('color', '#464a50');
            }
        });
    }





 
How to fix this? I can see the pager templates, but it is not clickable.
How to make the pagination?
Thanks