DataTable 1.10.10 + Bootstrap

Buttons Test

HTML

<script src="https://cdn.datatables.net/s/bs-3.3.5/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-colvis-1.1.0,b-html5-1.1.0,b-print-1.1.0,fc-3.2.0,fh-3.1.0,r-2.0.0,sc-1.4.0,se-1.1.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/s/bs-3.3.5/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-colvis-1.1.0,b-html5-1.1.0,b-print-1.1.0,fc-3.2.0,fh-3.1.0,r-2.0.0,sc-1.4.0,se-1.1.0/datatables.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<table>
  <tr>	
    <td>
      Date1 start: <input type="text" class="form-control" id="min_col_date1" placeholder="YYYY-MM-JJ HH:MM">
    </td>
    <td>a</td>
    <td>
      Date1 end:<input type="text" class="form-control" id="max_col_date1" placeholder="YYYY-MM-JJ HH:MM">
    </td>	
  </tr>
  <tr>	
    <td>
      Date2 start:<input type="text" class="form-control" id="min_col_date2" placeholder="YYYY-MM-JJ HH:MM">
    </td>
    <td>a</td>
    <td>
     Date2 end:<input type="text" class="form-control" id="max_col_date2" placeholder="YYYY-MM-JJ HH:MM">
    </td>	
  </tr>
  <tr>	
    <td>
     Date3 start: <input type="text" class="form-control" id="min_col_date3" placeholder="YYYY-MM-JJ HH:MM">
    </td>
    <td>a</td>
    <td>
     Date3 end:<input type="text" class="form-control" id="max_col_date3" placeholder="YYYY-MM-JJ HH:MM">
    </td>	
  </tr>  
  
</table>
<br>
<BR>
<div>
  <table class="table table-striped table-hover" id="mytable">
    <thead>

      <tr>
        <th class='col-info'>
          Line #
        </th>
        <th class='col-info'>
          EmpID
        </th>
        <th class='col-dataGroup1'>
          SID
        </th>
        <th class='col-dataGroup1'>
          First&#160;Name
        </th>
        <th class='col-dataGroup1'>
          Last&#160;Name
        </th>
        <th class='col-dataGroup2'>
          Type
        </th>
        <th class='col-date1'>
          Date1
        </th>
        <th...

JavaScript

dtTable = $('#mytable').DataTable();

$('[id^=min_col_date]').bind('change keyup', function() {
	start_date = $(this).val();
  column_name = $(this).attr("id").slice( -9 );;
  dtTable.draw();	
});	

$('[id^=max_col_date]').bind('change keyup', function() {
	end_date = $(this).val();
  column_name = $(this).attr("id").slice( -9 );
  dtTable.draw();	
});	

$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {

    var filterstart = start_date;
    var filterend = end_date;
    var iStartDateCol = "."+column_name;
    var iEndDateCol = "."+column_name;
    var tabledatestart = aData[iStartDateCol];
    var tabledateend= aData[iEndDateCol];
 
    if ( filterstart === "" && filterend === "" )
    {
        return true;
    }
    else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && filterend === "")
    {
        return true;
    }
    else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isAfter(tabledatestart)) && filterstart === "")
    {
        return true;
    }
    else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && (moment(filterend).isSame(tabledateend) || moment(filterend).isAfter(tabledateend)))
    {
        return true;
    }
    return false;
}
);