Search code examples
jqueryjquery-pluginsdatatabletablesorter

jQuery table sorter with combined rows

Sorry for this title, I didn't know how to describe it better.

I have the following table:

<tr class="row-vm">
    <td>...</td>
    <td>...</td>
    ...
</tr>
<tr class="row-details">
    <td colspan="8">
        <div class="vmdetail-left">
        ...
        </div>
        <div class="vmdetail-right">
        ...
        </div>
    </td>
</tr>

Every second row contains detail data for the first row. By default, it is hidden with CSS, but I can slide it open with jQuery.

What I would like to achieve: Table sorting similar to this jQuery plugin: http://tablesorter.com/docs/

The problem: The plugin should "glue together" all pair rows, and move them together. The sorting should be done only with the data of the first row (.row-vm), while ignoring the content of the second row (.row-details).

Is there a jQuery plugin that supports this?

Solution

  • I found this fiddle for the jQuery tablesorter in another post, worked beautifully for me!

    <tr class="row-vm">
    <td>John</td>           
</tr>
<tr class="row-details expand-child">
    <td colspan="6">
        Detail About John
    </td>
</tr>