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="datatables" class="display nowrap" width="100%">
            <thead>
                <tr>
                    <th>
                        <div class="form-check">
                            <label class="form-check-label"><input class="form-check-input" type="checkbox" id="selectAll"></label>
                        </div>
                    </th>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th class="hiddenDataforRow">TableRow</th>
                    <th>Show</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Select</th>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th class="hiddenDataforRow">TableRow</th>
                    <th>Show</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <th>
                        <div class="form-check">
                            <label class="form-check-label"><input name="SelectedUsers" class="form-check-input" type="checkbox"></label>
                        </div>
                    </th>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td class="hiddenDataforRow">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th style="text-align:center">
                                        Groups
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center" >
                                        Group 1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th>
                        <div class="form-check">
                            <label class="form-check-label"><input name="SelectedUsers" class="form-check-input" type="checkbox"></label>
                        </div>
                    </th>
                    <td>Garrett Winters</td>
                    <td>Director</td>
                    <td>Edinburgh</td>
                    <td class="hiddenDataforRow">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th>
                                        Groups
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th>
                        <div class="form-check">
                            <label class="form-check-label"><input name="SelectedUsers" class="form-check-input" type="checkbox"></label>
                        </div>
                    </th>
                    <td>Ashton Cox</td>
                    <td>Technical Author</td>
                    <td>San Francisco</td>
                    <td class="hiddenDataforRow">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th>
                                        Groups
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th>
                        <div class="form-check">
                            <label class="form-check-label"><input name="SelectedUsers" class="form-check-input" type="checkbox"></label>
                        </div>
                    </th>
                    <td>Cedric Kelly</td>
                    <td>Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td class="hiddenDataforRow">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th>
                                        Groups
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th>
                        <div class="form-check">
                            <label class="form-check-label"><input name="SelectedUsers" class="form-check-input" type="checkbox"></label>
                        </div>
                    </th>
                    <td>Jenna Elliott</td>
                    <td>Financial Controller</td>
                    <td>Edinburgh</td>
                    <td class="hiddenDataforRow">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th>
                                        Groups
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th>
                        <div class="form-check">
                            <label class="form-check-label"><input name="SelectedUsers" class="form-check-input" type="checkbox"></label>
                        </div>
                    </th>
                    <td>Brielle Williamson</td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
                    <td class="hiddenDataforRow">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th>
                                        Groups
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th>
                        <div class="form-check">
                            <label class="form-check-label"><input name="SelectedUsers" class="form-check-input" type="checkbox"></label>
                        </div>
                    </th>
                    <td>Herrod Chandler</td>
                    <td>Sales Assistant</td>
                    <td>San Francisco</td>
                    <td class="hiddenDataforRow">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th>
                                        Groups
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th>
                        <div class="form-check">
                            <label class="form-check-label"><input name="SelectedUsers" class="form-check-input" type="checkbox"></label>
                        </div>
                    </th>
                    <td>Rhona Davidson</td>
                    <td>Integration Specialist</td>
                    <td>Edinburgh</td>
                    <td class="hiddenDataforRow">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th>
                                        Groups
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th>
                        <div class="form-check">
                            <label class="form-check-label"><input name="SelectedUsers" class="form-check-input" type="checkbox"></label>
                        </div>
                    </th>
                    <td>Colleen Hurst</td>
                    <td>Javascript Developer</td>
                    <td>San Francisco</td>
                    <td class="hiddenDataforRow">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th>
                                        Groups
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th>
                        <div class="form-check">
                            <label class="form-check-label"><input name="SelectedUsers" class="form-check-input" type="checkbox"></label>
                        </div>
                    </th>
                    <td>Sonya Frost</td>
                    <td>Software Engineer</td>
                    <td>Edinburgh</td>
                    <td class="hiddenDataforRow">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th>
                                        Groups
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th>
                        <div class="form-check">
                            <label class="form-check-label"><input name="SelectedUsers" class="form-check-input" type="checkbox"></label>
                        </div>
                    </th>
                    <td>Jena Gaines</td>
                    <td>System Architect</td>
                    <td>London</td>
                    <td class="hiddenDataforRow">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th>
                                        Groups
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th>
                        <div class="form-check">
                            <label class="form-check-label"><input name="SelectedUsers" class="form-check-input" type="checkbox"></label>
                        </div>
                    </th>
                    <td>Quinn Flynn</td>
                    <td>Financial Controller</td>
                    <td>Edinburgh</td>
                    <td class="hiddenDataforRow">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <th>
                                    </th>
                                    <th>
                                        Groups
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 1
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 2
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label"><input class="form-check-input" type="checkbox"></label>
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        Group 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td></td>
                </tr>
            </tbody>
        </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;
}
​
    .hiddenDataforRow {
        display: none;
    }
    td.details-control {
        background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
        cursor: pointer;
    }
​
    tr.shown td.details-control {
        background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
    }
JavaScriptSaved
 
$(document).ready( function () {
  var table = $('#datatables').DataTable({
                "pagingType": "full_numbers",
                "lengthMenu": [
                    [10, 25, 50, -1],
                    [10, 25, 50, "All"]
                ],
                responsive: true,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search records",
                },
                columnDefs: [
​
                    {
                        targets: 5,
                        className: 'details-control',
                        orderable: false,
                        data: null,
                        defaultContent: ''
​
                    }
                ]
            });
  
  
  $('#selectAll').click(function (e) {
​
            var checked = $(this).prop('checked');
​
            table.cells(null).every(function () {
                var cell = this.node();
                $(cell).find('input[type="checkbox"][name="SelectedUsers"]').prop('checked', checked);
            });
        });
  
  
          $('#datatables 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
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(row.data()[4]).show();
                tr.addClass('shown');
            }
        });
  
} );
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers