jQuery table sorter with combined rows

Sorry for 开发者_StackOverflow社区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?

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>

The plugin available at Datatables.net supports detail rows, though the way I use them the detail rows are opened via ajax rather than all the data always being present. But when you do sort/reorder the details stay with the main data.

Was looking for this answer now in 2018, and if you're using tablesorter 2.0 by mottie, there is a class in the documentation called "tablesorter-childRow". So the example above would be:

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

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..

I have the same problem, and although I've not coded it yet, I'm thinking that if I wrote a widget that after the sort, looped through each of the visible rows, got the row's partner, and moved it to the right place in the table, that might work.