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>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>cif</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>cif</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>
​
       
      </table>
      
      <table id="acct" class="display compact nowrap w-100">
    <div class="col-12 text-center">
        <h2 class="text-dark py-2">Accounts List</h2>
    </div>
        
​
       </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;
}
​
JavaScriptSaved
 
$(document).ready(function () {
    var parentTable = $('#custt').DataTable({
        ajax: "/employee/home/getCustomersList",
        pageLength: 5,
        select: {
            style: 'single'
        },
        columns: [
            { "data": "cif" },
            { "data": "position" },
            { "data": "office" },
            { "data": "age" },
            { "data": "startDate" },
            { "data": "salary" },
        ]
    });
​
​
    var childTable = $('#acct').DataTable({
        ajax: {
            url: "/employee/home/getAccountsData",  // 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.cif = selected.data().cif;
                }
            },
​
            // 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().cif;
                    for (i = 0; i < data.data.length; i++) {
                        var row = data.data[i];
                        if (row.cif === name) {
                            return [row];
                        }
                    }
                } else {
                    return [];
                }
            }
        },
        columns: [
            { "data": "name" },
            { "data": "phoneNumber" },
            { "data": "emailAddress" },
            { "data": "postCode" }
            
        ]
    });
​
    // 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();
    });
​
});
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers