DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css">
<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">
     <tr>
       <td>child</td>
       <td>x</td>
       <td>x</td>
       <td>x</td>
       <td>x</td>  
       <td>x</td>
       <td>x</td>
       <td>x</td>
         
     </tr>    
  </tbody>
</table>

CSS

div.slider {
    display: none;
}

JavaScript

//miss table reference
var table = $('#products').DataTable({
      "lengthMenu": [[20, 50, 100, 500, -1], [20, 50, 100, 500, "All"]],
      "columnDefs": [{ className: "details-control", "targets": [ 0 ] }]
});

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

$('#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();
    }
  } );