数据表添加多个子行

Question

我有一个表连接到jQuery数据表。基于此示例，我想添加“隐藏的”子行以显示更多信息。

我有以下jsfiddle，其中我有一个名称/值对。

<tr data-child-name="Name1" data-child-value="Value 1">
    <td class="details-control"></td>

<tr data-child-name="Name1" data-child-value="Value 1">
    <td class="details-control"></td>

我的问题是如何添加多个名称/值对？这样我就可以像datatables.net示例中那样定义各种行。

我的源代码是一个php-script脚本，可以像jsfiddle示例中那样生成html。

这可能是一个简单的任务，但是我的jQuery技能非常有限:-)

谢谢。

UPDATE：数据来自ldap查询：

$ldapResults[$i]
echo "<td>" . utf8_encode($ldapResults[$i]['sn'][0]) . "</td>"

Answer 1

如果要保留数据源的数据属性，可以执行以下操作

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>

Answer 2

如果正在获取 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;
}