分组的动态列数- datatables jquery
分组的动态列数- datatables jquery
提问于 2020-06-07 06:23:20
我正在尝试从我的API中获取数据，并以一种按发货类型(图中的发货类型A和发货类型B)分组的方式来表示数据。每种货件类型都有不同的重量类别，每个重量都有特定的国家/地区的价格值。例如,
货件类型A-德国-重量=1千克-价格=20欧元
诸若此类。其思想是利用数据表、排序和搜索过滤器来方便地搜索特定的装运类型和国家。另外，使这些价格列可内联编辑。
因为整个项目都使用jQuery based datatables，所以我想坚持使用它，但是我找不到一种使用datatables的方法来实现。
我查过了，https://datatables.net/extensions/rowgroup/examples/initialisation/multipleGroups.html
并尝试自定义它，这是我能找到的最接近的地方，但找不到实现这一点的方法。
就像这样，并且能够利用数据表的搜索和排序功能。
<table>
<tbody>
<tr>
<td colspan="5">DHL</td>
</tr>
<tr>
<td></td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>Germany</td>
<td>20</td><td>30</td><td>40</td><td>50</td><td>60</td>
</tr>
<tr>
<td>Austria</td>
<td>120</td><td>130</td><td>140</td><td>X</td><td>610</td>
</tr>
<tr>
<td colspan="5">UPS</td>
</tr>
<tr>
<td></td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>Germany</td>
<td>20</td><td>30</td><td>40</td><td>50</td><td>60</td>
</tr>
<tr>
<td>Austria</td>
<td>120</td><td>130</td><td>140</td><td>X</td><td>610</td>
</tr>
</tbody>
</table>
回答 1
Stack Overflow用户
发布于 2020-06-07 08:01:29
以下示例基于demo here。
这是单行分组(不是多行分组)，因为问题中的示例数据只有一个组。
它使用以下标准脚本和CSS文件，并添加了两个“行组”插件文件：
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<!-- this next one is optional: -->
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<!-- row group plugin -->
<link href="https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js"></script>
</head>测试数据如下：
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Shipment Type</th>
<th>Country</th>
<th>Weight Category</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Shipment Type A</td>
<td>Germany</td>
<td>1</td>
<td>20</td>
</tr>
<tr>
<td>Shipment Type A</td>
<td>Germany</td>
<td>2</td>
<td>30</td>
</tr>
<tr>
<td>Shipment Type A</td>
<td>Germany</td>
<td>3</td>
<td>40</td>
</tr>
<tr>
<td>Shipment Type A</td>
<td>Austria</td>
<td>1</td>
<td>90</td>
</tr>
<tr>
<td>Shipment Type A</td>
<td>Austria</td>
<td>2</td>
<td>120</td>
</tr>
<tr>
<td>Shipment Type A</td>
<td>Austria</td>
<td>3</td>
<td>140</td>
</tr>
<tr>
<td>Shipment Type B</td>
<td>Germany</td>
<td>1</td>
<td>30</td>
</tr>
<tr>
<td>Shipment Type B</td>
<td>Germany</td>
<td>2</td>
<td>40</td>
</tr>
<tr>
<td>Shipment Type B</td>
<td>Germany</td>
<td>3</td>
<td>55</td>
</tr>
<tr>
<td>Shipment Type B</td>
<td>Austria</td>
<td>1</td>
<td>40</td>
</tr>
<tr>
<td>Shipment Type B</td>
<td>Austria</td>
<td>2</td>
<td>100</td>
</tr>
<tr>
<td>Shipment Type B</td>
<td>Austria</td>
<td>3</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Shipment Type</th>
<th>Country</th>
<th>Weight Category</th>
<th>Price</th>
</tr>
</tfoot>
</table>DataTables初始化代码如下：
<script type="text/javascript">
var collapsedGroups = {};
var dtable;
$(document).ready(function() {
$('#example').DataTable( {
"pageLength": 50,
rowGroup: {
dataSrc: 0,
startRender: function(rows, group) {
var collapsed = !!collapsedGroups[group];
rows.nodes().each(function (r) {
r.style.display = collapsed ? 'none' : '';
});
var toggleClass = collapsed ? 'fas fa-chevron-up' : 'fas fa-chevron-down';
// Add category name to the <tr>. NOTE: Hardcoded colspan
return $('<tr/>')
.append('<td colspan="' + rows.columns()[0].length +
'"><i class="'+ toggleClass + '"></i> ' +
group + ' (' + rows.count() + ')</td>')
.attr('data-name', group)
.toggleClass('collapsed', collapsed);
}
}
} );
} );
</script>最终结果如下所示：
可以用通常的方式对数据进行排序和过滤。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62238719
复制相关文章
相似问题
腾讯云开发者
