当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - create datatable header by selecting datepickers

问题描述:

i tried to create dataTable with dynamic column for selecting from&to datepickers.

column should contain fromDate between dates and toDate

JS Code

$("#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

});

}

});

here only displays single date as column

I tried like this

网友答案:

I've done some modifications to your code

var date= new Date();//changes
$("#from").datepicker();
$("#to").datepicker();

$("#from").val($.datepicker.formatDate("mm/dd/yy",date));//changes
$("#to").val($.datepicker.formatDate("mm/dd/yy",date));//changes


$('#getBetween').on('click', function () {
    var strTopHead='';
    $('#trTopHead').empty();
     $('#trBottomHead').empty();
   strTopHead=strTopHead+ '<th rowspan="2">Name</th><th rowspan="2">Code</th><th rowspan="2">code</th>';
    var start = $("#from").datepicker("getDate"),
        end = $("#to").datepicker("getDate"),
        currentDate = new Date(start),
        between = []
    ;
    if(start!=null&&end!=null){
    while (currentDate <= end) {
        currentDate.setDate(currentDate.getDate() + 1);//changes
        between.push(new Date(currentDate).toJSON().substring(0,10));//changes

    }
    var strTopHeadDates='';
  //  $('#results').html(between.join('<br> '));
    for(var i=0;i<between.length;i++){
        strTopHeadDates=strTopHeadDates+'<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>');
    }
        strTopHead=strTopHead+strTopHeadDates;
            $('#trTopHead').append(strTopHead);

     $('#example').dataTable();
        console.log($("#from").val());
    }
});

try this code

分享给朋友:
您可能感兴趣的文章:
随机阅读: