tablesorter.pager not working when data is coming from ajax

tablesorter.pager not working when data is coming from ajax

I'm hoping someone can help me with a problem I am having.  I am populating a tablesorter using ajax and the number of rows is quickly getting out of hand so I'd like to implement the tablsorterPager.  This works fine when the table rows are included in the jsp page, but when I try to populate dynamically I am still getting all of the rows at once.

Here is the html that builds the two:

            <div id="pager" class="pager">
        <select class="pagesize">
            <option selected="selected"  value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option  value="40">40</option>
        </select>
            </div>
            <table id="usertable" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Firm Name</th>
                    </tr>
                </thead>
                <tbody>
                   
                </tbody>
            </table>

And here is the javascript that populates the table:

            $(document).ready(function(){
                $("#usertable").tablesorter().tablesorterPager({container: $("#pager")});
            });
            function fillTable() {
                $.ajax({
                    url: "./UserServlet",
                    cache: false,
                    dataType: "json",
                    success: function(data) {
                        $('#usertable tbody').empty();
                        $.each(data, function(k,v) {
                            var firstname = (v.firstname) ? v.firstname : 'FirstName';
                            var lastname = (v.lastname) ? v.lastname : 'LastName';
                            var email = (v.email) ? v.email : 'EMail';
                            var firm = (v.firmname) ? v.firmname : 'Firm';
                            $('#usertable tbody').prepend(
                            '<tr>' +
                                '<td>' + firstname + '</td>'+
                                '<td>' + lastname + '</td>'+
                                '<td>' + email + '</td>'+
                                '<td>' + firm + '</td>'+
                                '</tr>'
                        );
                        });
                        $("#usertable").tablesorter().tablesorterPager({container: $("#pager")});
                    }
                });


I've also had a problem getting the table to be populated in the ready function.  If I put this it does nothing:

            $(document).ready(function(){
                $("#usertable").tablesorter().tablesorterPager({container: $("#pager")});
                fillTable();
            });

But this works:

            $(document).ready(function(){
                fillTable();
                $("#usertable").tablesorter().tablesorterPager({container: $("#pager")});
            });

Any ideas on either of these issues?

Thanks.