Is it possible to configure TableSorter to display dynamic data in 1 table?

Question

First off, what a great plug in; Now, question: Is it possible to configure TableSorter to display dynamic data in 1 table? I have a form on the front end & once submitted is saved to mysql. This data is displayed in a table on the front end. This is where I'm encountering an issue implementing TableSorter. The table data is populated via a snippet call, because there is a lot of data I could see that the child rows in TableSorter was perfect for my requirement. What I'm finding is a table is created & populated by the first row in the database. Then the 2nd row is created in another new table & the 3rd row is in another new table & so on. Is there any code I could use to override this issue so everything will appear in 1 table? This is the html I am using:

<thead>
    <tr>
        <th>Id No #</th>
        <th>Collection City</th>
        <th>Delivery City</th>
        <th>Date</th>
        <th>Cubic Metres Available</th>
    </tr>
</thead>
<tbody>
    <!-- First row expanded to reveal the layout -->
    <tr>
        <td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
            <a href="#" class="toggle">[[+id]]</a> <!-- link to toggle view of the child row -->
        </td>
        <td>[[+deptown]]</td>
        <td>[[+arrtown]]</td>
        <td>[[+freightdate]]</td>
        <td>[[+cubmt]]</td>
    </tr>
    <tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Vehicle Type</div><div>[[+vehicletype]]<br></div></td></tr>
    <tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Job Details</div><div>[[+freightvehicledetail]]<br></div></td></tr>
    <tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Contact Details</div><div>[[+freightvehiclecontact]]<br></div></td></tr>
    </tbody>

Here's hoping someone's got a solution because this plug in is awesome:-)

For clarity I am using the following unedited css & js files:

theme.blue jquery.tablesorter.pager

jquery.tablesorter jquery.tablesorter.widgets widget-pager

BloX Call

 [[!bloX? &packagename=`available-freight` &limit=`0` &classname=`AvailableFreight`     &tpls=`bloxouter:outerTpl||row:rowaTpl` &debug=`0`]]

outerTpl

<ul> [[+innerrows.row]] </ul>

rowaTpl (contains the above html (initial post) with the added tablesorter code, below)

<script src="js/jquery-latest.min.js"></script>

<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>

<!-- Tablesorter: pager -->
<link rel="stylesheet" href="../css/jquery.tablesorter.pager.css">
<script src="../js/widget-pager.js"></script>

<script id="js">$(function() {
$(".tablesorter")
    .tablesorter({
        theme : 'blue',
        // this is the default setting
        cssChildRow: "tablesorter-childRow",

        // initialize zebra and filter widgets
        widgets: ["zebra", "filter", "pager"],

        widgetOptions: {
            // output default: '{page}/{totalPages}'
            // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
            pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})', // '{page}/{totalPages}'
            pager_removeRows: false,


            // include child row content while filtering, if true
            filter_childRows  : true,
            // class name applied to filter row and each input
            filter_cssFilter  : 'tablesorter-filter',
            // search from beginning
            filter_startsWith : false,
            // Set this option to false to make the searches case sensitive 
            filter_ignoreCase : true
        }

    });

// hide child rows
$('.tablesorter-childRow td').hide();

// Toggle child row content (td), not hiding the row since we are using rowspan
// Using delegate because the pager plugin rebuilds the table after each page change
// "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
$('.tablesorter').delegate('.toggle', 'click' ,function(){

    // use "nextUntil" to toggle multiple child rows
    // toggle table cells instead of the row
    $(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle();

    return false;
});

// Toggle widgetFilterChildRows option
$('button.toggle-option').click(function(){
    var c = $('.tablesorter')[0].config.widgetOptions,
    o = !c.filter_childRows;
    c.filter_childRows = o;
    $('.state').html(o.toString());
    // update filter; include false parameter to force a new search
    $('table').trigger('search', false);
    return false;
});

});

Hopefully this what you want, if no please update & i'll dig deeper into BloX.

Answer 1

Sorry I'm not familiar with using MIGXDB or the BloX plug-in; but I will update the tags of this question.

I can help with part of the visual problem... The combination of rowspan and colspan do not match in the parent & child row groups. The rowspan is set to 2 but there are 3 child rows. So either set the rowspan to 4 (includes the parent) or make the third and fourth child rows have a colspan of 5 instead of 4.

<!-- First row expanded to reveal the layout -->
<tr>
    <td rowspan="4">
        <a href="#" class="toggle">[[+id]]</a>
    </td>
    <td>[[+deptown]]</td>
    <td>[[+arrtown]]</td>
    <td>[[+freightdate]]</td>
    <td>[[+cubmt]]</td>
</tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Vehicle Type</div><div>[[+vehicletype]]<br></div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Job Details</div><div>[[+freightvehicledetail]]<br></div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Contact Details</div><div>[[+freightvehiclecontact]]<br></div></td></tr>