Tablesorter filter Function Distorts Table Results

When doing searches or filter to specific name if there are multiple results the table becomes distorted, see images showing table before filter and after filter:

Here is the code i am using:

    <div class="pager">
    <img src="../assets/images/first.png" class="first" alt="First" />
    <img src="../assets/images/previous.png" class="prev" alt="Prev" />
    <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
    <img src="../assets/images/next.png" class="next" alt="Next" />
    <img src="../assets/images/last.png" class="last" alt="Last" />
    <select class="pagesize" title="Select page size">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
        <option value="50">50</option>
    </select>
    <select class="gotoPage" title="Select page number"></select>
</div>

<table class="tablesorter">
<colgroup>
    <col width="85" />
    <col width="155" />
    <col width="155" />
    <col width="100" />
    <col width="100" />
</colgroup>

Here is the javascript:

$(function() {

  $(".tablesorter")
    .tablesorter({
      theme: 'blue',
      // this is the default setting
      cssChildRow: "tablesorter-childRow",

      // initialize zebra and filter widgets
      widgets: ["zebra", "filter", "pager"],

      widgetOptions: {
        // output default: '{page}/{totalPages}'
        // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
        pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})', // '{page}/{totalPages}'
        pager_removeRows: false,


        // include child row content while filtering, if true
        filter_childRows: true,
        // class name applied to filter row and each input
        filter_cssFilter: 'tablesorter-filter',
        // search from beginning
        filter_startsWith: false,
        // Set this option to false to make the searches case sensitive
        filter_ignoreCase: true
      }

    });

  // hide child rows
  $('.tablesorter-childRow td').hide();

  // Toggle child row content (td), not hiding the row since we are using rowspan
  // Using delegate because the pager plugin rebuilds the table after each page change
  // "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
  $('.tablesorter').delegate('.toggle', 'click', function() {

    // use "nextUntil" to toggle multiple child rows
    // toggle table cells instead of the row
    $(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle();

    return false;
  });

  // Toggle widgetFilterChildRows option
  $('button.toggle-option').click(function() {
    var c = $('.tablesorter')[0].config.widgetOptions,
      o = !c.filter_childRows;
    c.filter_childRows = o;
    $('.state').html(o.toString());
    // update filter; include false parameter to force a new search
    $('table').trigger('search', false);
    return false;
  });
});

I got 2 questions:

1. How do I get the search to show clean undistorted results where just click on 'more inf' will reval child data?


2. What change do I make to get 100 results to appear by default?

I just want to add, when table first loads it only displays 20 results.