DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="http://cdn.datatables.net/plug-ins/1.10.10/sorting/datetime-moment.js"></script>
          <table id="resultado" class="display">
			<thead>
				<tr >
				  <th >Fecha</th>
				  <th >Cant. Presentaciones Enviadas</th> 
				  <th >Importe a cobrar</th> 
				  <th >Cant. Presentaciones Ingresadas</th>			
				  <th >Importe cobrado</th> 
          <th >FechaHide</th> 
				</tr>
			</thead>
			<tbody>
        <tr >
					<td>01/03/2017</td>
					<td>78</td>
					<td>$ 879854</td>
					<td>564</td>
					<td>$ 566</td>		
          <td>20170301</td>
				</tr>
        <tr >
					<td>11/02/2017</td>
					<td>78</td>
					<td>$ 879854</td>
					<td>564</td>
					<td>$ 566</td>		
          <td>20170211</td>
				</tr>
        <tr >
					<td>12/02/2017</td>
					<td>78</td>
					<td>$ 879854</td>
					<td>564</td>
					<td>$ 566</td>			
          <td>20170212</td>
				</tr>
        <tr >
					<td>13/02/2017</td>
					<td>78</td>
					<td>$ 879854</td>
					<td>564</td>
					<td>$ 566</td>	
          <td>20170213</td>			
				</tr>
      </tbody>
   </table>

JavaScript

//the moment.js strings is actually parseable
console.log(Date.parse('12/31/2014 12:04 PM'));

function customStatusFilter(filterVal, columnVal) {
	var found;
	if (columnVal === '') {
		return true;
	}
	switch (filterVal) {
	case 'pending':
		found = columnVal.search(/Pending/g);
		break;
	case 'qualified':
		found = columnVal.search(/Qualified/g);
		break;
	case 'pending_and_qualified':
		found = columnVal.search(/Pending|Qualified/g);
		break;
	default:
		found = 1;
		break;
	}

	if (found !== -1) {
		return true;
	}
	return false;
}    
    
$(document).ready(function() {
    $.fn.dataTable.moment( 'DD/MM/YYYY');
    window.dataTable = $('#resultado').dataTable({
        columnDefs : [
            { type : 'date', targets : [5] }
        ],    
		displayLength: 25,
		lengthChange: false,
		statesave: false
	}).columnFilter([
			{ column_number: 0, filter_type: "range_date", filter_container_id: "leads_filter_date_range", filter_default_label: [ "From", "To" ] },
			{ column_number: 5,
			  filter_type: 'custom_func',
			  custom_func: customStatusFilter,
			  data: [
			      { value: 'pending', label: 'Pending' }, 
				  { value: 'qualified', label: 'Qualified' }, 
				  { value: 'pending_and_qualified', label: 'Both Pending & Qualified' }
			  ],
			  filter_container_id: "leads_filter_status",
			  filter_default_label: ""
			},
		]
	);
	
});