Search code examples
javascripttablesorter

Tablesorter Child Row always shows for every search filter

The email row is the parent. And the address is the child row.
The childRows are displayed for every search filter keyword.
My aim is to simply filter childRows and show only the matching childRows with Parent Rows as output.
Can someone please help me in figuring out where the problem is.

enter image description here

HTML code:

<div class="form-control divCheckBox">
        <div class="tableFilterLink" data-table="selectedTableFilter">
            <i class="icon-filter"></i>
            <a>Show Filters</a>
        </div>
        <table id="selectedTableFilter" class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>Selected Email</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>dffbach@yahoo.com</td>
            </tr>
            <tr>
                <td>kjjdoe@hotmail.com</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>
            <tr>
                <td>pootconway@earthlink.net</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>
            </tbody>
        </table>
    </div>

Javascript:

$("#selectedTableFilter").tablesorter({
    debug: true,
    headerTemplate: "{content}<b></b>",
    cssChildRow : "tablesorter-childRow",
    widgets: ["zebra","filter"],
    sortInitialOrder: "asc",
    sortList: [[0,0]],
    sortRestart: true,
    widgetOptions: {
        filter_hideFilters: true,
        zebra : ['normal-row', 'alt-row' ],
        filter_childRows: true,
        filter_cssFilter  : 'tablesorter-filter',
        filter_startsWith: false,
        filter_ignoreCase : true,
        filter_childWithSibs: false,
    },
    widthFixed: true
});
Solution

  • Thanks @Mottie

    Github Issue link

    If you are using a custom theme for tablesorter, please make sure that the following definition is included: 

    .tablesorter-filter {
  display: none;
}

    JSFIDDLE