How can i apply date range filter to the code below
<body>
<a class="toggle">
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-up"></i>
</a>
<div class="container">
<h3 align="center">Container IN Report</h3>
<div class="table-responsive">
<div align = "right">
<button id="btn-show-all-children" type="button" class="btn btn-success">Expand All</button>
<button id="btn-hide-all-children" type="button" class="btn btn-success">Collapse All</button>
</div>
<br>
<br>
<table id="profile_data" class="display table-striped table-bordered" cellspacing="0">
<thead>
<tr>
<th>More Info</th>
<th>In Date</th>
<th>In Time</th>
<th>Cotainer No</th>
<th>Size</th>
<th>Vehicle No</th>
<th>Transport</th>
<th>Unloaded By</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Filter</th>
<th>In Date</th>
<th>In Time</th>
<th>Cotainer No</th>
<th>Size</th>
<th>Vehicle No</th>
<th>Transport</th>
<th>Unloaded By</th>
</tr>
</tfoot>
</table>
</div>
</div>
</body></html>
<script>
var tableData = '';
$(document).ready(function () {
GetMembersRecord();
});
var GetMembersRecord = function () {
$.ajax({
url: 'transaction1.json',
method: 'post',
dataType: 'json',
success: function (data) {
BindData(data);
}
});
}
var BindData = function (response) {
tableData = $('#profile_data').DataTable({
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
exportOptions: {
columns: [ 0, ':visible' ]
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
'colvis'
],
dom: 'lBfrtip',
data: response,
columns: [
{
"className": 'details-control',
"targets": [ 0 ],
"orderable": false,
"bSortCellsTop": true,
"data": null,
"defaultContent": ''
},
{ "data": "0" },
{ "data": "1" },
{ "data": "2" },
{ "data": "3" },
{ "data": "4" },
{ "data": "5" },
{ "data": "6" },
],
initComplete: function () { // After DataTable initialized
this.api().columns([1,2,3,4,5,6,7]).every( function () {
var column = this;
var select = $('<select><option value=""/></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} ); // this.api function
} //initComplete function
});
$('#profile_data tbody').on('click', 'td.details-control', function(){
var tr = $(this).closest('tr');
var row = tableData.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');
}
} );
// Handle click on "Expand All" button
$('#btn-show-all-children').on('click', function(){
// Enumerate all rows
tableData.rows().every(function(){
// If row has details collapsed
if(!this.child.isShown()){
// Open this row
this.child(format(this.data())).show();
$(this.node()).addClass('shown');
}
});
});
// Handle click on "Collapse All" button
$('#btn-hide-all-children').on('click', function(){
// Enumerate all rows
tableData.rows().every(function(){
// If row has details expanded
if(this.child.isShown()){
// Collapse row details
this.child.hide();
$(this.node()).removeClass('shown');
}
});
});
}function format ( d ) {
// d is the original data object for the row
return '<table cellpadding="1" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Type:</td>'+
'<td>'+d[7]+'</td>'+
'</tr>'+
'<tr>'+
'<td>Party:</td>'+
'<td>'+d[8]+'</td>'+
'</tr>'+
'<tr>'+
'<td>Status:</td>'+
'<td>'+d[9]+'</td>'+
'</tr>'+
'<tr>'+
'<td>Remarks:</td>'+
'<td>'+d[10]+'</td>'+
'</tr>'+
'<tr>'+
'<td>Entered by :</td>'+
'<td>'+d[11]+'</td>'+
'</tr>'+
'</table>';}
</script>
