siddharth_application/application/views/Report_openorder.php

<?php
if(!empty($open_po))
{

}
?>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css">
      <style> 
 
         .dataTables_filter {
                            width: 50%;
                            float: right;
                            text-align: right;
                            }
			   .dataTables_paginate {
                            width: 50%;
                            float: right;
                            text-align: right;
                           }
		    div.dt-buttons {
                            position: relative;
                            float: right;

                           }
		 
			   
	 </style>
 <div class="row" style="min-height: 600px;">
        <!-- Left col -->
        <div class="col-md-12">
        <!-- TABLE: LATEST ORDERS -->
          <div class="box box-info">
            <div class="box-header with-border">
              <center><h3 class="box-title"><p style="color:#3c8dbc"><b>Open Orders - Pending</b></p></h3></center>
			</div>
			<!-- /.box-header -->
            <div class="row">
		   <div class="col-md-6">
			 <div class="input-group input-daterange input" >
                   <div class="input-group-addon"><b>Total Order Value From:</b></div>
                   <input type="number" id="min" class="form-control date-range-filter"  placeholder="From:">
                   <div class="input-group-addon"><b>to</b></div>
                   <input type="number" id="max" class="form-control date-range-filter"  placeholder="To:">
		           <div class="input-group-addon"> <a   onclick="Reset()"><b>Clear</b></a></div>
             </div>
           </div>
		   <div class="col-md-6">
			 <div class="input-group input-daterange input">
                   <div class="input-group-addon"><b>Created Date From:</b></div>
                   <input type="text" id="min-date" class="form-control filter1" placeholder="From:">
                   <div class="input-group-addon"><b>to</b></div>
                   <input type="text" id="max-date" class="form-control filter1" placeholder="To:">
		           <div class="input-group-addon"> <a   onclick="Reset()"  ><b>Clear</b></a></div>
             </div>
           </div>
        </div>			
			 
		       
			 <div class="box-body">
              <div>
                <table class="table table-bordered table-hover" id="req" >
                   <thead>
                     <tr>
				       <th>PO NO</th>
                       <th>PO Type</th>
					   <th>Created Date</th>
					   <th>Approved Date</th>
					   <th>Requested Department</th>
                       <th>Total Order Value</th>
                       
                      </tr>
                    </thead>
				    <tbody>
				       <?php if(!empty($open_po)){
					   foreach($open_po as $rel)
					    {				
					   ?> 
					  <tr>
                        <td><span><?php echo $rel->PONO?></span></td>
                        <td><span><?php echo $rel->POType?></span></td>
				        <td><span><?php echo $rel->CreatedDate?></span></td>
                        <td><span><?php echo $rel->ApprovedDate?></span></td>
						<td><span><?php echo $rel->Dept_Name?></span></td>
					    <td align="right"><span><?php echo $rel->TotalOrderValue?></span></td>
					   
					
					  </tr>
			           <?php
					    }
						
					   }
					   ?>
			        </tbody>
			      </table>
			 
				</div>
			   </div>
			</div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>

<script> 
	

// Bootstrap datepicker
// Set up your table
$(document).ready(function() {
    table = $('#req').DataTable( {
        "dom": "<'row'<'col-md-6'l><'col-md-6'Bf>>" +
"<'row'<'col-md-6'><'col-md-6'>>" +
"<'row'<'col-md-12't>><'row'<'col-md-4'i><'col-md-8'p>>",
        buttons: [
		{
			    extend: 'collection',
                text: 'Export Open Orders-Pending',
				  buttons: [
				             'excel'
				           ]
		}
        ]
    } );
} );


$( function() {
		//var dateFormat = "mm-dd-yy",
			from = $( "#min-date" )
				.datepicker({
					dateFormat: "dd-mm-yy",
					defaultDate: "+0d",
					changeMonth: true,
					numberOfMonths: 1
				})
				.on( "change", function() {
					to.datepicker( "option", "minDate", getDate( this ) );
				}),
			to = $( "#max-date" ).datepicker({
				dateFormat: "dd-mm-yy",
				defaultDate: "+0d",
				changeMonth: true,
				numberOfMonths: 1
			})
			.on( "change", function() {
				from.datepicker( "option", "maxDate", getDate( this ) );
			});

		function getDate( element ) {
			var date;
			try {
				date = $.datepicker.parseDate( dateFormat, element.value );
			} catch( error ) {
				date = null;
			}

			return date;
		}
	} );


//$('.input-daterange').each(function() {
 // $(this).datepicker('clearDates');
//});


// Extend dataTables search
$.fn.dataTable.ext.search.push(
  function(settings, data, dataIndex) {
    var min = (moment($('#min-date').val(), "DD/MM/YYYY").isValid()) ? ~~moment($('#min-date').val(), "DD/MM/YYYY").format("X") : null;
    var max = (moment($('#max-date').val(), "DD/MM/YYYY").isValid()) ? ~~moment($('#max-date').val(), "DD/MM/YYYY").format("X") : null;
    var CreatedDate = ~~moment(data[2], "DD/MM/YYYY").format("X"); // Our date column in the table
   //  alert(min);
     if (min == null && max == null) {
            return true;
        }
        if (min == null && CreatedDate <= max) {
            return true;
        }
        if (max == null && CreatedDate >= min) {
            return true;
        }
        if (CreatedDate <= max && CreatedDate >= min) {
            return true;
        }
        return false;
    }
);

// Re-draw the table when the a date range filter changes
$('.filter1').change(function() {
  table.draw();
});

$('#my-table_filter').hide();

//total order value range
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var TotalOrderValue = parseFloat( data[5] ) || 0; 
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && TotalOrderValue <= max ) ||
             ( min <= TotalOrderValue   && isNaN( max ) ) ||
             ( min <= TotalOrderValue   && TotalOrderValue <= max ) )
        {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    //var table = $('#qdetails').DataTable();
     
    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        table.draw();
    } );
} );
//for clear button
function Reset()
{
	 $('#min').val('');
	 $('#max').val('');
	 $('#min-date').val('');
	 $('#max-date').val('');
}







	</script>