jQuery table sorter with combined rows

Question

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?

Answer 1

I know this doesn't answer your actual question about an alternate tablesorter, but I think you might find more success just rearranging the HTML, and using any regular tablesorter without the need for special requirements.

Maybe you could put the visible row information, and the "hidden" data in the same row, and just emulate the fact that they are in different rows?

i.e.:

<tr>
  <div class="row-vm">
    ... info goes here- this can be in the form of floated divs,
        a ul, another table, or whatever suits you best
  </div>
  <div class="row-details">
    ... this is hidden, but can be expanded
  </div>
</tr>

The less table elements you use, the better..