$(function() {

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

  $(".tablesorter")
    .tablesorter({
      theme : 'blue',
      // this is the default setting
      cssChildRow: "tablesorter-childRow"
    })
    .tablesorterPager({
      container: $("#pager"),
      positionFixed: false
    });
    /* no longer needed!
    .bind('pagerChange', function(){
      // hide child rows after pager update
      $('.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:not(.tablesorter-childRow)').find('td').toggle();
    // in v2.5.12, the parent row now has the class tablesorter-hasChildRow
    // so you can use this code as well
    // $(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle();

    return false;
  });

});

<table class="tablesorter">
  <colgroup>
    <col width="85" />
    <col width="250" />
    <col width="100" />
    <col width="90" />
    <col width="70" />
  </colgroup>
  <thead>
    <tr>
      <th>Order #</th>
      <th>Customer</th>
      <th>PO</th>
      <th>Date</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
        <a href="#" class="toggle">SO71774</a> <!-- link to toggle view of the child row -->
      </td>
      <td>Good Toys</td>
      <td>PO348186287</td>
      <td>Jul 20, 2007</td>
      <td>$972.78</td>
    </tr>
    <tr class="tablesorter-childRow">
      <td colspan="4">
        <div class="bold">Shipping Address</div>
        <div>99700 Bell Road<br>Auburn, California 95603</div>
      </td>
    </tr>
    <tr>
      <td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
        <a href="#" class="toggle">SO71775</a> <!-- link to toggle view of the child row -->
      </td>
      <td>Cycle Clearance</td>
      <td>PO58159451</td>
      <td>May 6, 2007</td>
      <td>$2,313.13</td>
    </tr>
    <tr class="tablesorter-childRow">
      <td colspan="4">
        <div class="bold">Shipping Address</div>
        <div>2255 254th Avenue Se<br>Albany, Oregon 97321</div>
      </td>
    </tr>

    <!-- View page source for complete HTML markup -->

  </tbody>
</table>

<div id="pager" class="pager">
  <form>
    <input type="button" value="&lt;&lt;" class="first" />
    <input type="button" value="&lt;" class="prev" />
    <input type="text" class="pagedisplay"/>
    <input type="button" value="&gt;" class="next" />
    <input type="button" value="&gt;&gt;" class="last" />
    <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>
  </form>
</div>