table sorter with combined two rows

jQuery table sorter with combined rows

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 sim开发者_高级运维ilar 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?

<tr class="row-vm">
    <td>...</td>
    <td>...</td>
...
</tr>
<tr class="row-details">
    <td colspan="6">
       Description data
    </td>
</tr>
<tr class="row-vm">
    <td>...</td>
    <td>...</td>
...
</tr>
<tr class="row-details">
    <td colspan="6">
       Description data
    </td>
</tr>

So i'm not sure how well documented this was but i found what i think you are looking for in the table object.

Check out this fiddle

It looks like you can add a class of expand-child. Or you can pass in your own class name

$("table").tablesorter({
    cssChildRow: "row-details"
});

We have the same issue and found a workaround. I pass the class name that I have set on the 2nd row. Just add one of the code below :

$(document).ready(function()
    {
        $("tableName/ID/classname").tablesorter({
            cssChildRow: "tableName/ID/classname"
        });
    }
);

or

$("tableName/ID/classname").tablesorter({
    cssChildRow: "tableName/ID/classname"
});

i'm using datatables, take a look and see if helps you

examples: http://datatables.net/examples/