数据表子行未显示答案

【问题标题】：Datatables child row not showing数据表子行未显示
【发布时间】：2015-09-23 15:23:17
【问题描述】：

我正在关注 Datatables Sliding Child Rows 上的这篇博文，但单击时无法显示我的行。我只想在单击第一列时显示子行。我做错了什么？

我的 jQuery

<script type="text/javascript">
  $(document).ready(function(){
    $('#products').DataTable({
      "lengthMenu": [[20, 50, 100, 500, -1], [20, 50, 100, 500, "All"]],
      "columnDefs": [{ className: "details-control", "targets": [ 0 ] }]
    });
  });
</script>

<script type="text/javascript">
  $('#products tbody').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
        $('div.slider', row.child()).slideUp( function () {
            row.child.hide();
            tr.removeClass('shown');
        } );
    }
    else {
        // Open this row
        row.child( format(row.data()), 'no-padding' ).show();
        tr.addClass('shown');

        $('div.slider', row.child()).slideDown();
    }
  } );
</script>

然后表格本身会显示一些虚拟数据

<table id="products" class="table table-striped table-hover table-bordered 
  table-condensed">
    <thead>
     <tr>
      <th> </th>        
      <th> </th>
      <th><a>TITLE</a></th>
      <th><a>ASIN</a></th>
      <th><a>PRICE</a></th>
      <th><a>SKU</a></th>
      <th> </th>
      <th> </th>
     </tr>
   </thead>

   <tbody class="product-index">

   <% @merchant.products.each do |product| %>
     <tr>
       <td>+
         <div class="slider" name>
           <table>
             <tr>
               <td>
               ... Data to be shown ...
               </td>
             </tr>
           </table>
         </div>
       </td>
       <td><%= check_box_tag('sellersku[]', product.sellersku) %></td>
       <td><%= product.title %></td>
       ...
   <% end %>
  </tbody>
</table>

【问题讨论】：

点击后检查元素时，控制台是否有错误输出？另外，为什么<tr> <td>+ <div class="slider" name>中的<td>后面有一个“+”字符？
不，没有错误..它什么也没做..令人沮丧..“+”现在只是一个占位符..直到我得到一个图标..只是点击上..
你能提供来自Here的小提琴

标签： jquery datatable parent-child

【解决方案1】：

首先，您缺少table 引用，即var table = $('#products').DataTable()。

您还需要实际插入子行的内容。 dataTables 子行是动态插入的 - 您不能使用标记指示的静态内容。通常，您会使用返回子行内容的函数，通常称为format(data)（实际上在复制的代码中确实引用了此类函数），其中data 是父行本身。但你可以随心所欲地做。下面只是您对问题的标记：

function format(data) {
    return '<div class="slider" name>'+
           '<table>'+
             '<tr>'+
               '<td>'+
               '... Data to be shown ...'+
               '</td>'+
             '</tr>'+
           '</table>'+
         '</div>'
}

这两个改动让你的代码可以工作，包括幻灯片效果 -> http://jsfiddle.net/LmudsL36/

【讨论】：