datatable head creation using 2 datepickers

by Prasanth AR

HTML

<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<input id="from" />
<input id="to" />
<button id="getBetween">Get Report</button>
<div id="results"></div>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr id="trTopHead">
                
                
            </tr>
            <tr id="trBottomHead">
               
              </tr>
        </thead>
 
        
        <tbody>
         
                    </tbody>
    </table>

JavaScript

$("#from").datepicker();
$("#to").datepicker(); 

var strTopHead='<th rowspan="2">Name</th><th rowspan="2">Code</th><th rowspan="2">code</th>';

$('#getBetween').on('click', function () {
    
    $('#trTopHead').empty();
     $('#trBottomHead').empty();
    var start = $("#from").datepicker("getDate"),
        end = $("#to").datepicker("getDate"),
        currentDate = new Date(start),
        between = []
    ;
    if(start!=null&&end!=null){
    while (currentDate <= end) {
        between.push(new Date(currentDate).toJSON().substring(0,10));
        currentDate.setDate(currentDate.getDate() + 1);
    }
    
  //  $('#results').html(between.join('<br> '));
    for(var i=0;i<between.length;i++){
        strTopHead=strTopHead+'<th colspan="3">'+between[i]+'</th>';

    $('#trBottomHead').append('<th>C</th><th>D</th>               <th>E</th>');
        $('table>tbody').append('<tr><td>Tiger Nixon</td>                <td>System Architect</td>                <td>$320,800</td>                <td>Edinburgh</td>                <td>5421</td>               <td>[email protected]</td></tr>');
    }
            $('#trTopHead').append(strTopHead);
        
        $('#example').dataTable({
        "scrollY":        "200px",
        "scrollCollapse": true
        });
    }
});