TMS

by Ramesh Kanagaraj

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<div id='dataTableContainer'>

</div>

CSS

thead {
  background-color: #64B448;
}

tbody tr:nth-child(odd) {
  background-color: #eaeaea;
}

tbody tr:nth-child(even) {
  background-color: #f6f6f6;
}

JavaScript

$(document).ready(function() {
  var objData = [{
      "firstName": "Ponmarimuthu",
      "projectName": "Tooltopia Support",
      "billableStatus": "Yes",
      "2017-12-01": 12,
      "2017-12-02": 24,
      "2017-12-03": 24,
      "2017-12-04": 9,
      "2017-12-05": 9,
      "2017-12-06": 7,
      "2017-12-07": 7,
      "2017-12-08": 7,
      "2017-12-09": 24,
      "2017-12-10": 24,
      "2017-12-11": 9,
      "2017-12-12": 9,
      "2017-12-13": 8,
      "2017-12-14": 8,
      "2017-12-15": 9,
      "2017-12-16": "L",
      "2017-12-17": "WFH",
      "2017-12-18": 9,
      "2017-12-19": 8,
      "2017-12-20": 12,
      "2017-12-21": 9,
      "2017-12-22": 12,
      "2017-12-23": 24,
      "2017-12-24": 24,
      "2017-12-25": 0,
      "2017-12-26": 12,
      "2017-12-27": 9,
      "2017-12-28": 9,
      "2017-12-29": 9,
      "2017-12-30": 24,
      "2017-12-31": 24,
      "Total": 150
    },
    {
      "firstName": "Jasim",
      "projectName": "Matson Support",
      "billableStatus": "Yes",
      "2017-12-01": 12,
      "2017-12-02": 12,
      "2017-12-03": 0,
      "2017-12-04": 9,
      "2017-12-05": 9,
      "2017-12-06": 10,
      "2017-12-07": 7,
      "2017-12-08": 4,
      "2017-12-09": 8,
      "2017-12-10": 24,
      "2017-12-11": 9,
      "2017-12-12": 9,
      "2017-12-13": 8,
      "2017-12-14": 8,
      "2017-12-15": 9,
      "2017-12-16": 12,
      "2017-12-17": 24,
      "2017-12-18": 9,
      "2017-12-19": 8,
      "2017-12-20": 12,
      "2017-12-21": 10,
      "2017-12-22": 12,
      "2017-12-23": 24,
      "2017-12-24": 7,
      "2017-12-25": 0,
      "2017-12-26": 12,
      "2017-12-27": 9,
      "2017-12-28": 9,
      "2017-12-29": 9,
      "2017-12-30": 24,
      "2017-12-31": 24,
      "Total": 150

    }, {
      "firstName": "Ramesh",
      "projectName": "Trident ",
      "billableStatus": "Yes",
      "2017-12-01": 9,
      "2017-12-02": 9,
      "2017-12-03": 9,
      "2017-12-04": 9,
      "2017-12-05": 0,
     ...