A Pen by Kautuk R Desai

Thumbnail
This awesome code was written by kautuk-desai, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kautuk-desai ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Kautuk R Desai</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/kautuk-desai/a-pen-by-kautuk-r-desai-XqMZQZ */
html {
  height: 100%;
}
body{
  height:100%;
}

.page-header, .page-footer{
  height: 5%;
}

td.details-control:before {
    content: "\f067";
    cursor: pointer;
}
tr.shown td.details-control:before{
  content: "\f068";
}

/*Downloaded from https://www.codeseek.co/kautuk-desai/a-pen-by-kautuk-r-desai-XqMZQZ */
/* Formatting function for row details - modify as you need */
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>Full name:</td>" +
    "<td>" +
    d.name +
    "</td>" +
    "</tr>" +
    "<tr>" +
    "<td>Extension number:</td>" +
    "<td>" +
    d.extn +
    "</td>" +
    "</tr>" +
    "<tr>" +
    "<td>Extra info:</td>" +
    "<td>And any further details here (images etc)...</td>" +
    "</tr>" +
    "</table>"
  );
}

$(document).ready(function() {
  var table = $("#example").DataTable({
    ajax: {
            "type" : "GET",
            "url" : "https://jsonblob.com/api/c8a2e690-4d63-11e8-a9ee-9376e615251e",
            "dataSrc": function ( json ) {
                //Make your callback here.
                alert("Done!");
                return json.data;
            }       
            },
    columns: [
      {
        className: "details-control",
        orderable: false,
        data: null,
        defaultContent: ""
      },
      { data: "name" },
      { data: "position" },
      { data: "office" },
      { data: "salary" }
    ],
    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 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(format(row.data())).show();
      tr.addClass("shown");
    }
  });
});

Comments