Tablesorter filter Function Distorts Table Results

Question

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;
  });
});

Table HTML

            <tr>
<td rowspan="5"> <!-- rowspan="5" makes the table look nicer -->
    <a href="#" class="toggle">[[+id]] - More info</a> <!-- link to toggle view of the child row -->
</td>
<td>[[+deptown]]</td>
<td>[[+arrtown]]</td>
<td>[[+freightdate]]</td>
<td>[[+cubmt]]</td>
        </tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Vehicle Type</div><div>[[+vehicletype]]<br></div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Job Details</div><div>[[+freightvehicledetail]]<br></div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Contact Details</div><div>[[+freightvehiclecontact]]<br></div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Expected Rate in RM</div><div>[[+returnrate]]<br></div></td></tr>

I got 2 questions:

1. How do I get the search to show clean undistorted results where just click on 'more info' will reveal 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.

Answer 1

It appears that the problem is that the colspan is set to 4 when it should be set to 5

<td colspan="5">...</td>

I copied the HTML into this demo, and it appears to work without any issues.

To get 100 results to show by default, set the widget options (since you're using the pager widget) pager_size option to 100.

// set number of rows to show; make sure to include this
// value in the select options
pager_size: 100,

Also, include this option in the select within the pager HTML

<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>
    <option value="100">100</option>
</select>

As a reminder: the pager_savePages option is set to true by default, so it saves the last setting of the page size to local/session storage, so changing the default setting to 100 may not appear to work until you manually set the page size select to 100!! Or clear the local/session storage.