I am trying to add a server side datatable implementation with date range filter. The filter does not filter any data. I have no idea where it is breaking. need your help in figuring out where I am going wrong.
here is the script.
$(document).ready(function() {
'use strict';
var dataTable = $('#employee-grid').DataTable({
"processing": true,
"serverSide": true,
"sScrollY": "300px",
"iDisplayLength": 25,
"bJQueryUI": true,
"bStateSave": true,
"ajax": {
url: "employee-grid-data.php", // json datasource
type: "post", // method , by default get
error: function() { // error handling
$(".employee-grid-error").html("");
$("#employee-grid").append('No data found in the server');
$("#employee-grid_processing").css("display", "none");
}
},
"tableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "collection",
"sButtonText": "Export",
"aButtons": ["csv", "xls", "pdf", "print"]
}
]
}
});
function myCustomFilterFunction(filterVal, columnVal) {
var found;
if (columnVal === '') {
return true;
}
if (found !== -1) {
return true;
}
return false;
}
var oTable = $('#employee-grid').dataTable().yadcf([{
column_number: 0,
filter_container_id: 'external_filter_container_0',
filter_type: "auto_complete",
text_data_delimiter: ","
}, {
column_number: 1,
filter_container_id: 'external_filter_container_1',
filter_type: "auto_complete",
text_data_delimiter: ","
}, {
column_number: 2,
filter_container_id: 'external_filter_container_2',
filter_type: "auto_complete",
text_data_delimiter: ","
}, {
column_number: 3,
filter_container_id: 'external_filter_container_3',
filter_type: 'range_date',
date_format: 'mm/dd/yyyy'
}, {
column_number: 4,
filter_container_id: 'external_filter_container_4',
data: [{
value: '1',
label: 'Yessss :)'
}, {
value: '0',
label: 'Noooo :('
}],
filter_default_label: "Select Yes/No"
}], {
externally_triggered: true
});
});
And Here is the Html
<div class="container">
<div id="externaly_triggered_wrapper" class="">
<div>
<span>First name:</span>
<span id="external_filter_container_0"></span>
</div>
<div>
<span>Last name:</span>
<span id="external_filter_container_1"></span>
</div>
<div>
<span>Email:</span>
<span id="external_filter_container_2"></span>
</div>
<div>
<span>Date Filter:</span>
<span id="external_filter_container_3"></span>
</div>
<div>
<span>Newsletter:</span>
<span id="external_filter_container_4"></span>
</div>
</div>
<div id="externaly_triggered_wrapper-controls">
<div>
<input type="button" onclick="yadcf.exFilterExternallyTriggered(oTable);" value="Filter" class="some_btn general_btn">
<input type="button" onclick="yadcf.exResetAllFilters(oTable);" value="Reset" class="some_btn general_btn">
</div>
</div>
<div class="container" style="width:760px !important;">
<table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last name</th>
<th>Email</th>
<th>Date added</th>
<th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Yes / No: activate to sort column ascending" style="width: 235px;">
<div class="DataTables_sort_wrapper" style="display: inline-block;">Yes / No<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>
<div id="yadcf-filter-wrapper--example1-2" class="yadcf-filter-wrapper">
<select id="yadcf-filter--example1-2" class="yadcf-filter " onchange="yadcf.doFilter(this, '-example1', 2, 'contains');" onkeydown="yadcf.preventDefaultForEnter(event);" onmousedown="yadcf.stopPropagation(event);" onclick="yadcf.stopPropagation(event);">
<option value="-1">Select Yes/No</option>
<option value="Yes">Yessss :)</option>
<option value="No">Noooo :(</option>
</select>
<button type="button" id="yadcf-filter--example1-2-reset" onmousedown="yadcf.stopPropagation(event);" onclick="yadcf.stopPropagation(event);yadcf.doFilter('clear', '-example1', 2); return false;" class="yadcf-filter-reset-button ">x</button>
</div>
</th>
</tr>
</thead>
</table>
</div>
