DataTable

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<html>

  <body>
    <div id="dataTableExample" style="border: 1px solid;">
      <div id="headerTable">
        <table width="100%" id="dtExampleHeader" class="display cell-border compact stripe" cellspacing="0">
          <thead>
            <tr>
              <th rowspan="2" width="100">Aggregation</th>
              <th rowspan="1" colspan="3">P&amp;L</th>
              <th rowspan="1" colspan="4">Exposure(%) </th>
              <th rowspan="2">#P</th>
              <th rowspan="2">#L</th>
              <th rowspan="2">#S</th>
            </tr>
            <tr>
              <th>L</th>
              <th>S</th>
              <th>T</th>
              <th>L</th>
              <th>S</th>
              <th>N</th>
              <th>G</th>
            </tr>
          </thead>
        </table>
      </div>
      <div id="bodyTable">
        <table width="100%" id="dtExampleBody" class="display cell-border compact stripe" cellspacing="0">
          <thead>
            <tr style="height: 0px; /*display: none;*/">
              <th rowspan="2" width="100"></th>
              <th rowspan="1" colspan="3"></th>
              <th rowspan="1" colspan="4"></th>
              <th rowspan="2"></th>
              <th rowspan="2"></th>
              <th rowspan="2"></th>
            </tr>
            <tr style="height: 0px; /*display: none;*/">
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </body>

</html>

JavaScript

$(document).ready(function() {
      fnLoadDataTableInstance();
    })

    function fnLoadDataTableInstance() {
      var headerSource = [{
        aggregation: '-',
        pnl_l: '70.1',
        pnl_s: '-8.5',
        pnl_t: '61.6',
        exp_l: '10.89',
        exp_s: '-2.0',
        exp_n: '-5.51',
        exp_g: '20.18',
        p: '104',
        l: '90',
        s: '11'
      }];
      var dataSource = [{
          aggregation: 'Sector A',
          pnl_l: '0.0',
          pnl_s: -'11.9',
          pnl_t: '-11.9',
          exp_l: '0.0',
          exp_s: '-7.57',
          exp_n: '-7.55',
          exp_g: '7.55',
          p: '3',
          l: '0',
          s: '3'
        },
        {
          aggregation: 'Sector B',
          pnl_l: '51.7',
          pnl_s: -'3.9',
          pnl_t: '47.8',
          exp_l: '4.72',
          exp_s: '-0.37',
          exp_n: '-4.35',
          exp_g: '5.08',
          p: '22',
          l: '20',
          s: '2'
        },
        {
          aggregation: 'Sector C',
          pnl_l: '18.4',
          pnl_s: '7.3',
          pnl_t: '25.7',
          exp_l: '6.17',
          exp_s: '5.94',
          exp_n: '6.39',
          exp_g: '7.55',
          p: '79',
          l: '70',
          s: '6'
        }
      ];

      $('#dtExampleHeader').DataTable({
        dom: 't',
        data: headerSource,
        columns: [{
            data: 'aggregation',
          },
          {
            data: 'pnl_l'
          },
          {
            data: 'pnl_s'
          },
          {
            data: 'pnl_t'
          },
          {
            data: 'exp_l'
          },
          {
            data: 'exp_s'
          },
          {
            data: 'exp_n'
          },
          {
            data: 'exp_g'
          },
          {
            data: 'p'
          },
          {
            data: 'l'
          },
          {
            data: 's'
          }
        ],
        "language": {
          "emptyTable": "No data...