首先，多么棒的插件；现在，问题：是否可以将 TableSorter 配置为在 1 个表中显示动态数据？我在前端有一个表单，一旦提交就会保存到 mysql。此数据显示在前端的表格中。这是我在实现 TableSorter 时遇到问题的地方。表格数据是通过片段调用填充的，因为有很多数据我可以看到 TableSorter 中的子行非常适合我的要求。我发现的是一个表是由数据库中的第一行创建和填充的。然后在另一个新表中创建第二行，第三行在另一个新表中等等。是否有任何代码可以用来覆盖此问题，以便所有内容都显示在 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 和 js 文件：
theme.blue jquery.tablesorter.pager
jquery.tablesorter jquery.tablesorter.widgets widget-pager
BloX 呼叫
[[!bloX? &packagename=`available-freight` &limit=`0` &classname=`AvailableFreight` &tpls=`bloxouter:outerTpl||row:rowaTpl` &debug=`0`]]
外部Tpl
<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;
});
});
希望这是您想要的，如果没有，请更新，我将深入研究 BloX。