数据表添加多个子行
Datatables add multiple child-rows
我有一个连接到jQuery数据表的表。基于此示例,我想添加"隐藏"子行以显示额外信息。
我有以下jsfiddle,其中我有一个名称/值对。
<tr data-child-name="Name1" data-child-value="Value 1">
<td class="details-control"></td>
function format ( name, value ) {
return '<div>' + name + ': '+ value + '</div>';
}
$(document).ready(function () {
var table = $('#example').DataTable({});
// Add event listener for opening and closing details
$('#example').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child( format(tr.data('child-name'), tr.data('child-value') )).show();
tr.addClass('shown');
}
});
});
我的问题是如何添加多个名称/值对?这样我就可以定义各种行,如 datatables.net 示例中所示。
我的源代码是一个 php-script ,它可以生成 html,就像 jsfiddle 示例中一样。
这可能是一件容易的事,但我的jQuery技能非常有限:-)
谢谢。
更新:数据来自 ldap 查询:
$ldapResults[$i]
echo "<td>" . utf8_encode($ldapResults[$i]['sn'][0]) . "</td>"
如果要保留数据源的数据属性,可以执行以下操作
function format ( dataSource ) {
var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
for (var key in dataSource){
html += '<tr>'+
'<td>' + key +'</td>'+
'<td>' + dataSource[key] +'</td>'+
'</tr>';
}
return html += '</table>';
}
$(function () {
var table = $('#example').DataTable({});
// Add event listener for opening and closing details
$('#example').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format({
'Key 1' : tr.data('key-1'),
'Key 2' : tr.data('key-2')
})).show();
tr.addClass('shown');
}
});
});
td.details-control {
background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" />
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Item 1</th>
<th>Item 2</th>
<th>Item 3</th>
<th>Item 4</th>
</tr>
</thead>
<tbody>
<tr data-key-1="Value 1" data-key-2="Value 2">
<td class="details-control"></td>
<td>data 1a</td>
<td>data 1b</td>
<td>data 1c</td>
<td>data 1d</td>
</tr>
<tr data-key-1="Value 1" data-key-2="Value 2">
<td class="details-control"></td>
<td>data 2a</td>
<td>data 2b</td>
<td>data 2c</td>
<td>data 2d</td>
</tr>
</tbody>
</table>
您可以创建需要为每一行显示的数据数组
EG :
var data = [
{ key1 :'value1', key2 :'value2', key3 :'value3'}, //Row1
{ key1 :'value1', key2 :'value2'} //Row2
];
并更新了format()
function format (index ) {
var json_data = data[parseInt(index)];
var op = '';
$.each(json_data, function(key, value){
op +='<div>' + key + ': '+ value + '</div>';
});
return op;
}
现在只需在自定义属性中添加数组的索引<tr data-child-index="1">
最后row.child(format(tr.data('child-index'))).show();
编辑:无需更改 html。
使用 jQuery index()
动态计算索引
row.child(format($('#example td.details-control').index($(this)))).show();
演示
如果要获取 json 数据以显示为子级,请尝试如下:
else {
// Open this row
// pass your json data to show in details
row.child( format(myJsonData)).show();
tr.addClass('shown');
}
并在格式函数中将其更改为,
function format ( json ) {
var $json=$.parseJSON(json);// if not parsed
var str='';
$json.each(function(key,value){
str += '<div>'+key+':'+value+'</div>';
});
return str;
}
相关文章:
- 将单击事件添加到数据表
- Knockout.JS,模板都是通过表单不添加数据的
- 如何根据某些条件向可编辑的jquery数据表添加或删除按钮
- 将索引列添加到数据表
- JQuery - 根据数组数据将 html 表列添加到表的末尾
- 无法在引导表中再次添加数据
- 将文本框中的数据添加到表Javascript、HTML中
- jquery数据表显示/隐藏列添加了错误的选择
- 如何在metrojs中将复选框添加到数据表中
- 如何在表空或在jquery数据表中找不到匹配项的情况下添加自定义警告消息
- 数据表1.8.0添加服务器参数无效
- 数据表中的fnAddData()添加到同一行,而不是添加到新行
- 在数据表的新行中添加按钮,变得未定义
- 将页面控件添加到数据表,但当代码运行时,页面中不显示任何内容
- j查询选择动态添加的表行的列数据
- 向数据表中的 json 数据添加文本
- 我想显示数据库中的数据.如果我们新添加一个表单数据,我想附加显示的新帖子而不使用代码点火器刷新
- 如何使用 js 将数据链接动态添加到数据表行
- 向饼状高图添加数据表
- 使用JavaScript添加数据表到HTML表:无法读取属性'parentNode'零