数据表子行问题

Question

我已经在这个网站的内部和外部进行了广泛的搜索，找到了答案，但似乎找不到任何东西。

我当前正在为项目使用数据表，并且正在使用DT提供的子行功能。 当前，我实现该系统的方式是将HTML用于基线，然后子行调用脚本（我使用此JSFiddle作为基础）来显示数据。

<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>
        <td class="details-control"></td>
        <td>data 1a</td>
        <td>data 1b</td>
        <td>data 1c</td>
        <td>data 1d</td>
    </tr>
    <tr>
        <td class="details-control"></td>
        <td>data 2a</td>
        <td>data 2b</td>
        <td>data 2c</td>
        <td>data 2d</td>
    </tr>
</tbody>

 var data = [
    { key1 :'value1', key2 :'value2', key3 :'value3'},
    { key1 :'value1', key2 :'value2'}
];
function format (index ) {
    var json_data =  data[parseInt(index)];
    var op = '';
    $.each(json_data, function(key, value){
        op +='<div>' + key + ': '+ value + '</div>';
    });
    return op;
}

  $(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($('#example td.details-control').index($(this)))).show();
              tr.addClass('shown');
          }
      });
  });

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
 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;
}

我的问题是，与上面的JSFiddle不同，我的代码行除了第一行外没有提取任何数据。

我对该项目有很多数据，所以我希望避免重新开始。
我已经尝试了DT的JS版本，但从未使它能够正常工作，因此HTML方法就是我所追求的。 这是指向测试页面的链接。 我应该补充一下，左侧的子行图标目前尚未显示，但这是一个不相关的问题。 提前致谢。 :)

编辑添加：我附上一张图片以供澄清。 每个子行仅显示子行代码第一行的数据...因此，每个子行都使用Avila的链接（这是脚本中的第一行，因为它们按字母顺序排列），并且我需要他们展示相关的内容。 我对用作基础的JSFiddle所做的唯一更改是将表的ID和“键”更改为“交付”

落下

Answer 1

问题是分页和以下行的组合：

row.child(format($('#example td.details-control').index($(this)))).show();

默认分页设置为每页10个，它们都是“ Avila University”。

$('#example td.details-control').index($(this))始终是0到9之间的数字（每页10个）。 无论您在哪个页面上。 如果转到第3页，则希望返回的索引更像25，而不是5（现在正在发生）。 当时DOM中仅存在当前页面上的10行，这就是jQuery的.index()所查看的内容。

在测试页上，如果将每页10个更改为每页100个，然后单击“贝克大学”行，则会看到它返回正确的信息。

这是一个可能的解决方法：

row.child(
    format(
        table.row(this.closest('tr')).index()
    )
).show();

（我已经这样格式化了，因为它不可能在一行中混合使用DataTables和jQuery来读取全部内容）

习惯于到处放置console.log()调用以进行调试。 我主要是通过添加console.log(index);这个问题的console.log(index); 作为format功能的第一行。