File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Child Rows">
    <title></title>
    <meta charset="utf-8" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
​
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js" type="text/javascript"></script>
</head>
<body>
    <table width="100%" class="display" id="datatable" cellspacing="0">
        <thead>
            <tr>
                <th></th>
                <th>CoreApi ID</th>
                <th>First name</th>
                <th>Last name</th>
                <th>Email</th>
                <th>Date arrival</th>
                <th>Date departure</th>
​
​
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>Date arrival</th>
                <th>Date departure</th>
            </tr>
        </tfoot>
    </table>
​
</body>
</html>
CSS
 
        td.details-control {
            text-align:center;
            color:forestgreen;
    cursor: pointer;
}
tr.shown td.details-control {
    text-align:center; 
    color:red;
JavaScript
 
    $(document).ready(function () {
​
         var table = $('#datatable').DataTable({
             "data": testdata.data,
                        select:"single",
             "columns": [
                 {
                     "className": 'details-control',
                     "orderable": false,
                     "data": null,
                     "defaultContent": '',
                     "render": function () {
                         return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                     },
                     width:"15px"
                 },
                 { "data": "coreapi_id" },
                 { "data": "first_name" },
                 { "data": "last_name" },
                 { "data": "email" },
                 { "data": "date_arrival" },
                 {"data": "date_departure"},
​
             ],
             "order": [[1, 'asc']]
         });
      
      // Add event listener for opening and closing details
         $('#example tbody').on('click', 'td.details-control', function () {
             var tr = $(this).closest('tr');
             var tdi = tr.find("i.fa");
             var row = table.row(tr);
​
             if (row.child.isShown()) {
                 // This row is already open - close it
                 row.child.hide();
                 tr.removeClass('shown');
                 tdi.first().removeClass('fa-minus-square');
                 tdi.first().addClass('fa-plus-square');
             }
             else {
                 // Open this row
                 row.child(format(row.data())).show();
                 tr.addClass('shown');
                 tdi.first().removeClass('fa-plus-square');
                 tdi.first().addClass('fa-minus-square');
             }
         });
​
         table.on("user-select", function (e, dt, type, cell, originalEvent) {
             if ($(cell.node()).hasClass("details-control")) {
                 e.preventDefault();
             }
         });
     });
​
    function format(d){
        
         // `d` is the original data object for the row
         return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
             '<tr>' +
                 '<td>Date arrival:</td>' +
                 '<td>' + d.date_arrival + '</td>' +
             '</tr>' +
             '<tr>' +
                 '<td>Date departure:</td>' +
                 '<td>' + d.date_departure + '</td>' +
             '</tr>' +
             '<tr>' +
                 '<td>Extra info:</td>' +
                 '<td>And any further details here (images etc)...</td>' +
             '</tr>' +
         '</table>';  
    }
​
​
                                  
       
​
    var testdata = {
    "data": [
    {
    "coreapi_id": 1,
    "first_name": "Ross",
    "last_name": "Geller",
    "email": "ross@abv.bg",
    "date_arrival": "2011/04/15",
    "date_departure": "2011/04/25",
    },
    {
    "coreapi_id": 2,
    "first_name": "Monica",
    "last_name": "Geller",
    "email": "monica@abv.bg",
    "date_arrival": "2011/04/16",
    "date_departure": "2011/04/28",
    },
    {
    "coreapi_id": 3,
    "first_name": "Rachel",
    "last_name": "Green",
    "email": "rachel@abv.bg",
    "date_arrival": "2011/04/17",
    "date_departure": "2011/04/30",
    },
    {
    "coreapi_id": 4,
    "first_name": "Chandler",
    "last_name": "Bing",
    "email": "chandler@abv.bg",
    "date_arrival": "2011/04/20",
    "date_departure": "2011/04/31",
    },
    {
    "coreapi_id": 5,
    "first_name": "Phoebe",
    "last_name": "Buffet",
    "email": "phoebe@abv.bg",
    "date_arrival": "2011/04/21",
    "date_departure": "2011/04/31",
    },
    ]
    };
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers