DataTables隐藏行详细信息示例 - 表头放错位置（连接测试用例）
我正在尝试创建一个表格，在点击加号图片时可以看到更多细节 - 类似于DataTables hidden row details example
不幸的是，有一条警告被打印为JavaScript警告，并且表头也被错放了 - 就好像其中有太多或没有足够的表格单元格一样：
我准备了一个简单的测试用例，当你将其保存到文件并在浏览器中打开时，它会立即生效：
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var data = [
{"Total":17,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":17,"Test":"GSM_1900_GMSK_TXPOWER_HP_H","Measurement":"MEASUREMENT"},
{"Total":8,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":8,"Test":"TX_PWR_64_54","Measurement":"POWER"}
];
$(function() {
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '<table bgcolor="yellow" cellpadding="8" border="0" style="padding-left:50px;">';
sOut += '<tr><td>BSN:</td><td>' + aData['Details']['BSN'] + '</td></tr>';
sOut += '<tr><td>Station:</td><td>' + aData['Details']['StationName'] + '</td></tr>';
sOut += '<tr><td>Project:</td><td>' + aData['Details']['ProjectName'] + '</td></tr>';
sOut += '</table>';
return sOut;
}
var fails = $('#fails').dataTable({
bJQueryUI: true,
sPaginationType: 'full_numbers',
aaData: data,
aaSorting: [[2, 'desc']],
aoColumns: [
{ mDataProp: 'Test', bSearchable: true, bSortable: true },
{ mDataProp: 'Measurement', bSearchable: true, bSortable: true },
{ mDataProp: 'Total', bSearchable: false, bSortable: true },
{ mDataProp: 'A', bSearchable: false, bSortable: true },
{ mDataProp: 'B', bSearchable: false, bSortable: true },
{ mDataProp: 'C', bSearchable: false, bSortable: true },
{ mDataProp: 'D', bSearchable: false, bSortable: true },
]
});
var th = document.createElement('th');
var td = document.createElement('td');
td.innerHTML = '<img src="http://www.datatables.net/release-datatables/examples/examples_support/details_open.png" class="details">';
$('#fails tbody th').each(function() {
this.insertBefore(th, this.childNodes[0]);
});
$('#fails tbody tr').each(function() {
this.insertBefore(td.cloneNode(true), this.childNodes[0]);
});
$('#fails tbody').on('click', 'td img.details', function() {
var nTr = $(this).parents('tr')[0];
if (fails.fnIsOpen(nTr)) {
this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_open.png';
fails.fnClose(nTr);
} else {
this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_close.png';
fails.fnOpen(nTr, fnFormatDetails(fails, nTr), 'details');
}
});
});
</script>
</head>
<body>
<table id="fails" cellspacing="0" cellpadding="4" width="100%">
<thead>
<tr>
<th>Test</th>
<th>Measurement</th>
<th>Total</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
请有人知道，如何解决这个问题？
我已尝试在HTML正文中添加/删除<th>Details</th>，但它没有帮助。
我也在DataTables forum问了这个问题。
更新
我收到了DataTables作者的有用评论，并决定将加号图像添加到每行中第一个单元格的内容中 - 而不是在每行中添加新单元格。
不幸的是我遇到了一个新问题：显示了加号图像，但是原始文本（测试名称）消失了：
这是我的新代码（加号图像由propTest添加）：
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var data = [
{"Total":17,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":17,"Test":"GSM_1900_GMSK_TXPOWER_HP_H","Measurement":"MEASUREMENT"},
{"Total":8,"A":0,"B":0,"Details":{"BSN":"1147387861","ProjectName":"R127","StationName":"D"},"C":0,"D":8,"Test":"TX_PWR_64_54","Measurement":"POWER"}
];
function propTest(data, type, val) {
if (type === 'set') {
console.log(val); // for some reason prints "null"
data.name = val;
data.display = '<img src="http://www.datatables.net/release-datatables/examples/examples_support/details_open.png" width="20" height="20" class="details"> ' + val;
return;
}
if (type === 'display') {
return data.display;
}
// 'sort', 'type', 'filter' and undefined
return data.name;
}
$(function() {
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '<table bgcolor="yellow" cellpadding="8" border="0" style="padding-left:50px;">';
sOut += '<tr><td>BSN:</td><td>' + aData['Details']['BSN'] + '</td></tr>';
sOut += '<tr><td>Station:</td><td>' + aData['Details']['StationName'] + '</td></tr>';
sOut += '<tr><td>Project:</td><td>' + aData['Details']['ProjectName'] + '</td></tr>';
sOut += '</table>';
return sOut;
}
var fails = $('#fails').dataTable({
bJQueryUI: true,
sPaginationType: 'full_numbers',
aaData: data,
aaSorting: [[2, 'desc']],
aoColumns: [
{ mData: propTest, bSearchable: true, bSortable: true },
{ mData: 'Measurement', bSearchable: true, bSortable: true },
{ mData: 'Total', bSearchable: false, bSortable: true },
{ mData: 'A', bSearchable: false, bSortable: true },
{ mData: 'B', bSearchable: false, bSortable: true },
{ mData: 'C', bSearchable: false, bSortable: true },
{ mData: 'D', bSearchable: false, bSortable: true }
]
});
$('#fails tbody').on('click', 'td img.details', function() {
var nTr = $(this).parents('tr')[0];
if (fails.fnIsOpen(nTr)) {
this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_open.png';
fails.fnClose(nTr);
} else {
this.src = 'http://www.datatables.net/release-datatables/examples/examples_support/details_close.png';
fails.fnOpen(nTr, fnFormatDetails(fails, nTr), 'details');
}
});
});
</script>
</head>
<body>
<table id="fails" cellspacing="0" cellpadding="4" width="100%">
<thead>
<tr>
<th>Test</th>
<th>Measurement</th>
<th>Total</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
1 个答案:
答案 0 :(得分：9)
使用DataTables（DT）可以通过多种方式实现此类行为。您可以实现原始目标，也可以使用扩展器和Test数据的相同列。
我正在花时间展示几个选项，因为我希望这可以作为其他人要求做类似事情的参考。
对于以下所有情况，您的表应包含DT创建之前的所有所需列（静态或动态）。
在单独的列中扩展
使用默认内容属性：
这个选项需要对现有示例进行最少量的修改，而且可能是最简单的。只需为额外列添加sDefaultContent选项：
{
mData: null,
bSearchable: false,
bSortable: false,
sDefaultContent: '<div class="expand /">',
sWidth: "30px"
},
mData属性设置为null，因为它的内容与行的数据数组无关。这使DT使用sDefaultContent中的值。
我冒昧地使用CSS作为扩展器按钮，因为这使得示例更简单，并且还解除了行为和表示。
我使用的CSS：
tr div.expand {
width: 20px;
height: 20px;
background-image: url('http://www.datatables.net/release-datatables/examples/examples_support/details_open.png');
}
tr div.open {
background-image: url('http://www.datatables.net/release-datatables/examples/examples_support/details_close.png');
}
和扩展器功能：
$('#fails tbody').on('click', 'td div.expand', function () {
var nTr = $(this).parents('tr')[0];
if (fails.fnIsOpen(nTr)) {
$(this).removeClass('open');
fails.fnClose(nTr);
} else {$.fn.dataTableExt.sErrMode = 'throw' ;
$(this).addClass('open');
fails.fnOpen(nTr, fnFormatDetails(fails, nTr), 'details');
}
});
我们使用div类定位expand，并根据需要切换其open类。
JSBin example。
扩展器包含在第一列
中使用格式化程序：
您可以指定aoColumnDefs配置数组，该数组比aoColumns配置更强大，更灵活。
通过mRender config属性指定该列的渲染器函数。
相关栏目的设置：
aoColumnDefs: [{
aTargets: [0],
mData: 'Test',
bSearchable: true,
bSortable: true,
mRender: expandRenderer
},
...
]
该函数在不同的上下文中被多次调用，并且应该告诉DT如何在表本身中显示数据，以及帮助确定用于排序和过滤目的的数据类型。
渲染器：
function expandRenderer(data, type, full) {
switch (type) {
case 'display':
return '<div class="expand-wrapper">'+
'<span class="expand"></span>'+
'<span class="data">'+
data+
'</span></div>';
case 'type':
case 'filter':
case 'sort':
return data;
}
}
需要3个参数：
-
data：行数组中的数据，在本例中为Test中存储的字符串。 -
type：请求的类型。它表示DT期望得到的回报：-
'display'：单元格本身会显示什么。 -
'type'：从函数返回的内容将用于确定行的数据类型。 -
'filter'，'sort'：用于过滤（搜索）和排序表格的数据。
-
-
full：此行的完整数据。
这一次，我决定使用由span包裹的div。
为了使图标垂直居中并让表格保持一行，我使用了以下CSS：
tr span.expand {
width: 20px;
height: 20px;
background-image: url('http://.../details_open.png');
display:inline-block;
vertical-align: middle;
margin-right: 5px;
}
div.expand-wrapper {
white-space:nowrap;
}
vertical-align: middle此处按预期工作，因为这是inline显示（inline-block，具体而言）。
如果没有这个CSS，DT就不会优雅地处理列宽，因为第一列并不真正意识到扩展器占用的额外空间。
没有这个CSS：
使用这个CSS：
以及相应的JSBin example。
提示：
我不喜欢使用alert()来显示错误。对于DT，您可以通过更改其错误模式设置来更改此行为：
$.fn.dataTableExt.sErrMode = 'throw' ;
这将抛出异常，因此您可以使用控制台捕获它，或者在未被捕获的情况下记录它。
资源：
DataTable options quick reference
PS，
可以通过将函数作为mData配置参数传递来进行进一步的自定义，但这超出了本答案的范围。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？