我正在使用 RowGrouping 插件，所有行都正确分组，如下所示:
这是我的实现:
HTML
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
JS
$(document).ready(function() {
var collapsedGroups = {};
var table = $('#example').DataTable({
ajax: "/ajax/objects.txt",
order: [[ 2, "desc" ]],
columns: [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
],
rowGroup: {
dataSrc: 'office',
startRender: function ( rows, group ) {
var collapsed = !!collapsedGroups[group];
rows.nodes().each(function (r) {
r.style.display = collapsed ? 'none' : '';
});
return $('<tr/>')
.append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
.attr('data-name', group)
.toggleClass('collapsed', collapsed);
},
},
});
$('#example tbody tr.group-start').each(function() {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
});
table.draw(false);
$('#example tbody').on('click', 'tr.group-start', function () {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
table.draw(false);
});
});
这是每个对象的数据结构:
{
extn: "5421",
name: "Tiger Nixon",
office: "Sidney",
position: "System Architect",
salary: "$320,800",
start_date: "2011/04/25",
country: {
id: "1",
flag: "https://media.api-sports.io/flags/au.svg"
}
}
我试图在城市名称附近显示每个员工所在国家的国旗，但不幸的是我无权访问当前行。
我尝试使用rows.data().eq(0)，但这实际上返回了该组的所有行。
有人可以帮我吗？
最佳答案
您可以在 startRender 函数中访问标志 URL，如下所示:
rows.data().toArray()[0].country.flag
这是有效的，因为 rows 值实际上是一个 Datatables API 实例 - 因此包含您需要的数据。
就我而言，我访问第一行数据 - 并且始终保证至少有一个这样的行 - 否则将不会创建该组。
解决方案的其余部分使用一些 CSS，使用弹性网格进行定位和对齐。
这是一个演示:
var dataSet = [
{
extn: "5421",
name: "Tiger Nixon",
office: "Sydney",
position: "System Architect",
salary: "$320,800",
start_date: "2011/04/25",
country: {
id: "1",
flag: "https://media.api-sports.io/flags/au.svg"
}
}
];
$(document).ready(function() {
var collapsedGroups = {};
var table = $('#example').DataTable({
//ajax: "ajax/objects.txt",
data: dataSet,
order: [[ 2, "desc" ]],
columns: [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
],
rowGroup: {
dataSrc: 'office',
startRender: function ( rows, group ) {
var flagUrl = rows.data().toArray()[0].country.flag;
var collapsed = !!collapsedGroups[group];
rows.nodes().each(function (r) {
r.style.display = collapsed ? 'none' : '';
});
return $('<tr/>')
.append('<td colspan="8" style="display: flex; align-items: center;"><span style="padding-right: 10px;">' + group + ' (' + rows.count() + ')</span><img src="' + flagUrl + '" width="40" height="50">' + '</td>')
.attr('data-name', group)
.toggleClass('collapsed', collapsed);
},
},
});
$('#example tbody tr.group-start').each(function() {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
});
table.draw(false);
$('#example tbody').on('click', 'tr.group-start', function () {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
table.draw(false);
});
});<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>这是一个演示:
关于javascript - 如何使用RowGroup显示图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69136811/