Search code examples
jqueryfilteringtablesorter

TableSorter Filtering Multiple Child Rows and TBody

Scenario

Using TableSorter (FORK) 2.18.3 jQuery 2.1.1

I have used a combination of denoting rows as "tablesorter-childRow" and defining tbody elements as "tablesorter-no-sort" entries. This combination allows me to sort the child data detail rows by the headers. And maintain them under the corresponding "Title" row.

I am encountering two issues:

Issue 1: If I define the detail data rows as children of the parent "title" row (which is what I want). The detail data rows cease being sortable. Is there a way to define rows as being child without losing the ability to sort? I believe the issue stems from each detail data row being child to the row above it. Rather than child to the parent "title" row.

Issue 2: When I try to filter. The "title" (parent) and "detail" rows (unless I set define as "tablesorter-childRows" in which case they remain but cannot be sorteed) disappear but the data summary and detail footer rows remain for every parent entry.

Am I trying to do something the TableSorter tag is not capable of doing?

[NOTE: I apoligize that I can't post the code. But basically I want a parent-row with multiple child-rows, some of which are created dynamically and the rest is static. When I sort, I want the child-rows to be sorted as well. When I filter, I want the entire block of rows to be displayed/hidden based on whether the filter matched.]

Table Structure

<table>

  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>

  [BEGIN:LOOP]
  <tr>
    <td colspan="3">Title</td>
  </tr>
  <tr>
    <td>SubHeading1</td>
    <td>SubHeading2</td>
    <td>SubHeading3</td>
  </tr>

  <tbody>
  [BEGIN:SUB-LOOP]
  <tr>
    <td>Data Detail 1</td>
    <td>Data Detail 2</td>
    <td>Data Detail 3</td>
  </tr>
  [END:SUB-LOOP]
  </tbody>

   <tr>
    <td>Data Summary 1</td>
    <td>Data Summary 2</td>
    <td>Data Summary 3</td>
  </tr>

  <tr>
    <td colspan="3">Detail Footer</td>
  </tr>

  [END:LOOP]

  <tbody class="tablesorter-no-sort",">
  <tfoot>
  <tr>
    <td colspan="3">Table Footer</td>
  </tr>
  </tfoot>
  </tbody>

</table>
Solution

  • Currently, that fork of tablesorter does not support sorting the contents of the child rows; but this branch does support hierarchical sorting. See this pull request for more information.

    Here is a demo.