Question

I want to implement the Demo shown at http://tablesorter.com/docs/example-pager.html in a mobile application. I want each row in the Demo to be collapsible/expandable. What is the best way to achieve it? To my knowledge tables don’t work well in mobile applications. Correct me if I am wrong. Thanks.

== EDIT ==

This is almost all I want

http://stokkers.mobi/jqm/tableview/demo.html

Answer 1

I’m not sure how this will do in a mobile application, but check out this demo. No need to download that mod as it was added to tablesorter 2.0.5.

The demo shows how to use an undocumented option named cssChildRow which contains the class name expand-child. This class name is added to a table row tr to attach it to the row before it (example code from that demo):

<tr>
    <td rowspan="2" class="collapsible"></td>
    <td rowspan="2" class="collapsible_alt"><a href="javascript:alert('Order # SO71774')">SO71774</a></td>
    <td>Good Toys</td>
    <td>PO348186287</td>
    <td>Jul 20, 2007</td>
    <td>$972.78</td>
</tr>
<tr class="expand-child">
    <td colspan="4">
        <div class="bold">Shipping Address</div>
        <div>
            99700 Bell Road<br /> Auburn, California 95603
        </div>
    </td>
</tr>

The code needed to make the rows collapsible in in this file: jquery.tablesorter.collapsible.js