Question

首先，这是一个多么好的插件;现在，问题：是否可以将TableSorter配置为在1个表中显示动态数据？我在前端有一个表格＆amp;一旦提交就保存到mysql。此数据显示在前端的表格中。这是我遇到实现TableSorter的问题。表数据通过代码段调用填充，因为有很多数据我可以看到TableSorter中的子行完全符合我的要求。我发现的是一张桌子和一张桌子。由数据库中的第一行填充。然后在另一个新表中创建第二行＆amp;第三排是另一张新表＆amp;等等。有没有我可以用来覆盖这个问题的代码所以一切都会出现在1个表中？这是我正在使用的HTML：

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

这里希望有人得到一个解决方案因为这个插件很棒： - ）

为了清楚起见，我使用的是以下未经编辑的css＆amp; js文件：

theme.blue jquery.tablesorter.pager

jquery.tablesorter jquery.tablesorter.widgets 插件-寻呼机

BloX Call

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

outerTpl

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

rowaTpl（包含上面的html（初始帖子），下面添加了tablesorter代码）

<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;
});

}）;

希望这就是你想要的，如果没有请更新＆amp;我会深入研究BloX。

Answer 1

抱歉，我不熟悉使用MIGXDB或BloX插件;但我会更新这个问题的标签。

我可以帮助解决视觉问题的一部分...... rowspan和colspan的组合在父母＆amp;子行组。 rowspan设置为2，但有3个子行。因此，要么将rowspan设置为4（包括父级），要么将第三个和第四个子行设为colspan 5而不是4。< / p>

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

是否可以将TableSorter配置为在1个表中显示动态数据？

1 个答案: