Question

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

我目前正在为项目使用数据表，并且正在使用DT提供的子行功能。目前，我实现该系统的方式是使用HTML作为基线，然后子行调用脚本（我以this 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方法就是我所追求的。 Here's指向测试页面的链接。我应该补充一下，左侧的子行图标目前尚未显示，但这是一个不相关的问题。提前致谢。：）

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

Dropdown

Answer 1

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

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

默认分页设置为每页10个，它们都是“阿维拉大学”。

$('#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);添加为format函数的第一行来弄清楚这一点的。

数据表子行问题

1 个答案: