File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
    <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <link href="https://nightly.datatables.net/select/css/select.dataTables.css?_=9a6592f8d74f8f520ff7b22342fa1183.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/select/js/dataTables.select.js?_=9a6592f8d74f8f520ff7b22342fa1183"></script>
      
      <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
        <div class="container">
            <table id="parent" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                    </tr>
                </thead>
​
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                    </tr>
                </tfoot>
            </table>
​
            <table id="child" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
​
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>
      
      </div>
    </body>
</html>
CSSSaved
 
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
​
​
div.container {
    min-width: 980px;
    margin: 0 auto;
}
​
​
JavaScriptSaved
 
$(document).ready(function() {
    var parentTable = $('#parent').DataTable( {
        ajax: "/ajax/objects.txt",
        pageLength: 5,
        select: {
          style: 'single'
        },
        columns: [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
        ]
    } );
  
          
    var childTable = $('#child').DataTable( {
        ajax: {
          url: "/ajax/objects.txt",  // This is the URL to the server script for the child data
          data: function ( d ) {
          
            // Get selected row
            var selected = parentTable.row( { selected: true } );
 
            // If there is a selected row then get the unique ID 
            // This will be sent to the server script for the child table
            if ( selected.any() ) {
                d.name = selected.data().name;
            }
          },
          
          // This is not part of the solution but
          // is used to simulate the child server script
          // which should only return the rows that correspond
          // to the parent row unique ID
          dataSrc: function (data) {
            var selected = parentTable.row( { selected: true } );
​
            if ( selected.any() ) {
                var name = selected.data().name;
                for (i=0; i < data.data.length; i++) {
                  var row = data.data[i];
                  if (row.name === name) {
                    return [row];
                  }
                }
            } else {
            return [];
            }
          }
        },
        columns: [
            { "data": "name" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
​
// Reload the child table when selecting parent row
// This will load the child table with the corresponding data
parentTable.on( 'select', function () {
    childTable.ajax.reload();
 
} );
​
// Reload the child table when deselecting row
// The child script should return zero 
// records to clear the table
parentTable.on( 'deselect', function () {
    childTable.ajax.reload();
} );  
​
parentTable.on( 'page.dt', function () {
    parentTable.rows().deselect();
    childTable.ajax.reload();
} );
  
} );
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers