title: Tablesorter filter Function Distorts Table Results
body: <p>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:
  <img src="https://i.stack.imgur.com/NFXRC.png" alt="How it looks before filter"></p>
  
  <p><img src="https://i.stack.imgur.com/vMZAg.png" alt="how it looks after filter"></p>
  
  <p>Here is the code i am using:</p>
  
  <pre><code>    &lt;div class="pager"&gt;
      &lt;img src="../assets/images/first.png" class="first" alt="First" /&gt;
      &lt;img src="../assets/images/previous.png" class="prev" alt="Prev" /&gt;
      &lt;span class="pagedisplay"&gt;&lt;/span&gt; &lt;!-- this can be any element, including an input --&gt;
      &lt;img src="../assets/images/next.png" class="next" alt="Next" /&gt;
      &lt;img src="../assets/images/last.png" class="last" alt="Last" /&gt;
      &lt;select class="pagesize" title="Select page size"&gt;
          &lt;option value="10"&gt;10&lt;/option&gt;
          &lt;option value="20"&gt;20&lt;/option&gt;
          &lt;option value="30"&gt;30&lt;/option&gt;
          &lt;option value="40"&gt;40&lt;/option&gt;
          &lt;option value="50"&gt;50&lt;/option&gt;
      &lt;/select&gt;
      &lt;select class="gotoPage" title="Select page number"&gt;&lt;/select&gt;
  &lt;/div&gt;
  
  &lt;table class="tablesorter"&gt;
  &lt;colgroup&gt;
      &lt;col width="85" /&gt;
      &lt;col width="155" /&gt;
      &lt;col width="155" /&gt;
      &lt;col width="100" /&gt;
      &lt;col width="100" /&gt;
  &lt;/colgroup&gt;
  </code></pre>
  
  <p>Here is the javascript:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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;
    });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Table HTML</p>
  
  <pre><code>            &lt;tr&gt;
  &lt;td rowspan="5"&gt; &lt;!-- rowspan="5" makes the table look nicer --&gt;
      &lt;a href="#" class="toggle"&gt;[[+id]] - More info&lt;/a&gt; &lt;!-- link to toggle view of the child row --&gt;
  &lt;/td&gt;
  &lt;td&gt;[[+deptown]]&lt;/td&gt;
  &lt;td&gt;[[+arrtown]]&lt;/td&gt;
  &lt;td&gt;[[+freightdate]]&lt;/td&gt;
  &lt;td&gt;[[+cubmt]]&lt;/td&gt;
          &lt;/tr&gt;
  &lt;tr class="tablesorter-childRow"&gt;&lt;td colspan="4"&gt;&lt;div class="bold"&gt;Vehicle Type&lt;/div&gt;&lt;div&gt;[[+vehicletype]]&lt;br&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="tablesorter-childRow"&gt;&lt;td colspan="4"&gt;&lt;div class="bold"&gt;Job Details&lt;/div&gt;&lt;div&gt;[[+freightvehicledetail]]&lt;br&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="tablesorter-childRow"&gt;&lt;td colspan="4"&gt;&lt;div class="bold"&gt;Contact Details&lt;/div&gt;&lt;div&gt;[[+freightvehiclecontact]]&lt;br&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="tablesorter-childRow"&gt;&lt;td colspan="4"&gt;&lt;div class="bold"&gt;Expected Rate in RM&lt;/div&gt;&lt;div&gt;[[+returnrate]]&lt;br&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>I got 2 questions:</p>
  
  <ol>
  <li>How do I get the search to show clean undistorted results where just click on 'more info' will reveal child data?</li>
  <li>What change do I make to get 100 results to appear by default?</li>
  </ol>
  
  <p>I just want to add, when table first loads it only displays 20 results. </p>